Видео

Amazing video as usual ❤️

Getting seriously fatigued by new react features

Great video! 2 extra notes: - React 19 automatically reset forms on actions, or you can call new ReactDOM.requestFormReset() API when using onKeyUp - React transitions need to be async due to lack of support of AsyncContext in browsers. setState calls after the await won't be part of the transition, you need to nest an extra startTransition call to make them part of the current transition Will send a Twitter DM, easier to explain :D

Keep going Jack, really useful to see RC updates like this. 👍

They extrended "useTransition" hook to accept async functions now :D

Hello, i am still learning and i've checked useActionState from latest version of NextJs and it looks like improved useFormState to me, so i would like to use it for pending/error states when i use server action (let's say addTodo). Why should i use useOptimistic hook too? I mean when i press Button in form with server action in useActionState i can add loading/ spinner status while isPending is active and/or error text once error occurs. If everything goes well, new todo is added to list and displayed. I am getting confused with all those new hooks and changes, so i would like to know what is the point of useOptimistic in scenario i've described. Does useOptimistic work like placeholder for data showing: once it is successful, data stays, and if not, they disappear? Ty :-)

Very detailed explanation, thank you very much!

Waiting for useNextJsDepression()

Fantastic presentation and content as usual, love these.

re 11:34 addNewTodo() will run synchronously up to the first await, so I believe that's why setOptimisticTodos works

Apollo client

The issue is that in JavaScript you can't distinguish between a const pointer and a const value. In JS, it's always just the pointer that is const, never the value.

As always, pretty insightful video with clear explanations and examples! Thanks for covering as much as possible in such a concise video!

Is there a way to optimistically perform more than one CRUD action? I ran into this problem where i had managed state but need to add / remove etc optimistically but the logic was honestly getting out of control compared to using something like use swr or zustand for state management.

Thanks for the useful video!

When will the pronextjs course be available??

wtf is the difference between addTodo() vs addNewTodo()?

Tired of React

Can anyone let me know the theme?

Okay, I'm not a big fan of this I think. I'm not feeling like this is enhancing the readability of the code to be honest. Updating the state manually and afterwards overriding it with the response is not adding more code than the useOptimistic, but everyone will understand what is happening. And I was hopeing we can have less hooks in react 19 not more 😒😒 Maybe some one can convince me

I would be cool to show the all the extensions like console ninja you’re using

i used it in a app where has the car functionality and the UX become better when the user increment or decrement the quantity of a product.

I have problem when I want to display data with dynamic 50+ rows it so slow. Did you know what is problem ?

Great vid as always! Correct me if I'm wrong but I believe with form action the input field should clear it self so you don't need that ref.current.value = ""? Tried to recreating it and it worked on my end at least, also I think the reason why the app "blew up" after you introduced useActionState was because the current action payload is the second argument not the first

Ew, what a mess these APIs are. Remix does all of this so much cleaner.

Great video thanks Jack, one question though how you are doing the syntax highlights when you are explaining and rest of the code fade

PLEASE STOP USING STUPID BOOMERS TODO STUPID EXAMPLE.

remember when optimistic functions used to be anti-user friendly. Now it's the time to be optimistic lier in your frontend till your backend requests return if they don't fail.

Excellent video Jack as usual! What's your opinion on all the code tied with the useOptimistic/startTransition/useActionState/etc that we have to write just to get an optimistic update? Doesn't it seem a bit boilerplate-y?

Gotta love that Ttttsszzzustand pronunciation!

Looks like a little bit complicated/over engineered to implement a simple optimistic UI in a todo app

cheers from Chile Jack!!

They're not very optimistic if we'll use this implementation

using that suspense properly handler reminds me of the bad old redux days. does react actually hire for overengineering?

You are the best!!!

Jack, i love your videos! I would love it if you did a review on tinybase. It seems like a very useful state manager specializing in offline first.

just to be clear, just putting a sqlite.db file in your project wont work in production if you deploy to vercel right?

I noticed the compiler is not memoizing functions from custom hooks. I had to useCallback my functions in my custom hooks to avoid rerenders. Any idea why?

That was heavy. Does memoization not create new map each time?

I like that caching becomes more of an opt-in feature. What I'd like to know is if request memoization is also affected by this change. Deduping fetch calls of a single request was great as it reduced prop-drilling. If caching is off by default, does that also mean that deduping on a single request is also off?

He's right yet he selected a bad argument. It's not about mutability, it's about Bang for the Buck. The reasoning of an average Js.Joe is very "cheap", if soon there appears a feature that helps them to spot a code issue once in 10 years, in return requiring to postfix_ boolean variables with underscore... most JS coders would enthusiastically accept it, bragging about supposedly improved 'code quality'. They don't care about readability, they are extremely easy to buy into something stupid - like no other programming community. The same happened with == vs === when some vicious Java dude, for a joke, taught every frontender to mindlessly use ===, like `typeof s === "string"` where typeof always return a string. But millions of JS monkes keep stroking this extra character... because it's a ritual. The same happened with TS 'readonly' which adds tons of troubles for no gains. Respect to Ryan for standing against the crowd, albeit I'm not his follower, he's right in his attitude to frontenders en masse. const does not add anything useful, except a feeling of a false self-satisfaction. How often do you reassign variables in practice so const vs let becomes such an important distinction for a new keyword? So many self-proclaimed FP fanboys among JS coders, they have to use conditional expressions, don't they? Why not a dedicated keyword for floats vs ints? Not a keyword for natural numbers? They would, at least, be useful.

I wonder how you would handle the selector if its an array of objects? Been wracking my head around how to handle that one. All the objects have a unique key so they could then be a selector for [idkey] : { // other objects }? Starting to realize how important data design is at a company where it was created organically so its a bit of a mess

Love htmx and astro. Alpine js was just that last missing reactivity part I was looking for. ❤

For time1 and time2, can we put them in separate suspense and put all suspense under a suspenseList to ensure the waterfall and sequential rendering? If so, what makes the difference here?

Didn't like that some of the styling (like padding or margins) is in the components and some is in CSS. Preferring tailwind's unified tailwind approach.

'prefer-const': 'off'

Thank you for posting this video. It is such a treasure for people like me who mostly self-learned

I just really love you. You might be one the best teacher out their.

Just like server components, the approach to hoisting promises makes sense to me. It's how I've been doing it for years. Data should be separated from rendering, this is how you avoid buggy applications.

could you explain more about typescript apply for micro?