Turns out useState might not be as simple as you think, and calling the set state function at the wrong time might result in React not batching state updates and might hurt your performance or cause bugs. Let's dig deep into this and figure out when React batches updates, when it doesn't and how to fix that.
👉 I'm a host on the React Round-Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
0:00 Introduction
1:37 Going Asynchronous
4:19 Fixing The Bug
5:49 Batching Updates in React 16 & 17
6:28 Upgrading To React 18
8:16 Fixing The App The Right Way
9:55 Outroduction
#react #batch_updates
Thanks jack. You’re one of the few educators who are remarkably good at what they do. Your tutorials are really helping me in relearning react after 2 years.
Awesome tutorial Jack. Thank you so much for sharing!
It is not easy to find this kind of in depth explorations around and get benefit out of true experiences like yours. Huge respect and thanks for sharing with us Jack.
This channel is the best thing I've found in a long time! I'm so grateful!
amazing, it very simple to understand. Please update video like this. Thank you so much for your hardwork
Thank you again. Short and in-depth video.
Thank you Jack for such wonderful insights and tricks
Your tutorial about React is very interesting. Thank you Jack.
Much better topic than circling around 25 state management solutions ! loved it
That's some good sauce! Kudos to you sir!
Excellent explanation Jack, thanks a lot!
Thank you for the videos, amazing content 🙏
Another great video, learned so much from watching your videos Jack. Keep it up!
Excellent topic that I think many people overlook! Thanks for the informative video :)
Thank you Jack for all this good content. I'm a medior freelance front-end developer and this content is really helping me stepping up my game. It's making me feel more comfortable doing my job.
Thank you Jack. Love this.
Thanks Jack, Awesome content 👍🏻
I feel so lucky that I've found this channel!
Thanks Jack! 🙏🏻
I learned something new, thanks Jack!
This channel is gold
Unique content and always Awesome
Accidentally land on a one the best video . Great Explanation
Thanks for cool stuff!
thanks man .... seriously, thank you very much for the vid
Awesome jack.. thanks
You have an amazing home in the middle of nowhere. You are becoming my inspiration
Thank you!
Another nice video, thanks jack
Awesome content 👍🏻
You the man, Jack!
Good job!
Thanks!! I didn't know this
Thanks for everything Jack. You go above and beyond for your supporters and we appreciate it immensely.
+ 1
+1
Cool tut tips, really don't know such mechanism
One thing that I notice, even with React 18, is that if you place a setState before a promise, it will not batch update all the states. It will batch update all the states until finding a promise, when it finds one, it's going to update all the states until that point, then it's going to search for another promise and do the same process. This was not describe in the React Docs but it makes a lot of sense, otherwise we wouldn't be able to update a loading state when doing async request without having to add the flushSync for all cases, making it pretty hard for applications to upgrade to React 18.
Can you provide a small sample demonstration in a codesandbox. I’d love to experiment more with it and if I make content out of that I’ll cite you and your example.
@@othecos Awesome, I see what you mean. And I'll definitely do a video on this and city your example because it is a good way to show it so I appreciate that. Though, IMHO, if the proper operation of the application relies on batching semantics I think that's too fragile.
You deserve an award
hmmm was not aware of unstable batch state updates. I used to go for usereduer as usestate is nothing but a wrapper over userreducer. but this keeps code more declarative i feel. thanks.
Awesome
How you edit your videos, its sooo clean and clear
Thanks for this! Just a request, can you please make a video on memoization in React? Like when to use React.memo, useMemo, & useCallback?
Great idea!
+1 for this. Would love to see in depth video on these.
@@EnesKab Don't worry, I gotcha covered. :)
@@jherr Awesome !! Looking forward to ☺️
Great explanation, Jack! I always group state when they are related and now I know why 😅 You mentioned that not all apps will be compatible with react 18. They are dropping support for some core feature? Migrate from 16 to 17 was not that hard. Should we expect something different for 18v ? Thank you! Great content as always!
The rendering engine changes to "concurrent rendering" which will break some apps if they used refs in particular ways. I did a video on it a while back.
@Jack Herrington do you remember which video was? I'm curious to watch it and failed miserably trying to find it. Sorry to bother you.
@@victorseara9970 Wow, it's an old one: kzhead.info/sun/adCke7dugGKhfoU/bejne.html
Thanks, video is great. But font is a little harder to read than regular one
Great vid Jack! I’m curious, what software do you use for onscreen drawing?
I use ScreenBrush and a cheapy Gaomon tablet. Turns out the Gaomon is more stable than Wacom. The Wacom tablet driver software would routinely take down my Mac. The Gaomon tablet doesn't even have a driver. :) So that's a big plus.
@@jherr Would you mind give a name of the specific model?
That advice will call you one... million.... dollars. www.amazon.com/gp/product/B07YFG742J Oh, crap, I just pasted the link. Drat! Foiled again!
잭 형 사랑해요~
Hi Jack, what is the difference between flushSync (React 18) and unstable_batchedupdates (React 16~17), I read a little documentation, these two feel so similar.
great video as usual 😁 anybody knows the name of the VSCODE theme color he uses? 🤔
Night Wolf [dark] with Operator Mono.
Thank you. nice video. I have a question, should I create different api for admin login and end user login. I have different react and next frontend project for admin and end user. any help would be very much appreciated.
Not sure how this relates to this video, but IMHO, you should have one login for everyone and then have roles assigned to a user that gives them admin permissions, or not. Of course, I don't know your situation, so "it depends".
unstable_batchedUpdates 🤯 I fixed a bug a while back by adding another conditional to a lengthy useEffect. I guarantee this was the root issue. Maybe I’ll dig up the old ticket and blow some minds with this tidbit 😏 And no, we’re still not on 18 yet 😢
In general, would you recommend against using state with 'complex' objects? Anecdotally, I've always seen it used with scalar values and read that using complex objects can futz up things like re-renders.
In this case I would recommend using a "complex" object. But yeah, it can mess up dependencies if you do something like [myStateObject] in the dependency, you should reference specific scalar values that you depend on like [myStateObject?.name].
Hi! Can you tell me which extension suggest code like on 2:13? And if you like to make a video about usefull vscode extensions would be great.
That's GitHub Copilot.
@@jherr thanks
how do you realize the stuff
What about using useReducer to update state instead of grouping all state in an object using useState? Any performance gains?
useState is just syntactic sugar on useReducer. So net effect should be the same. No perf gain, no perf loss.
@@jherr setRoles(()=>{ Setotherproperty(()=>{return otherproperty}); return role}) ... does this work?...
@@avonflex5031 I haven’t tried that recently. Not sure if I would do that even if it worked. Non-contextual batching is coming so I’d go for the unstable thing first (if I couldn’t do compound state like I did at the end.) and then dump unstable at 18.
Why isn't the roles array at 9:00 triggering infinite rerenders with the useEffect? Correct me if I'm wrong, but it seems like the roles array is being set to a new array reference within the useEffect every time it runs, which would trigger another rerender since it's changed and being tracked in the dependency array, and repeat.
That's why I change it a useMemo that in turn create scalar from it. And anything that depends on that scalar will be trigger if the value of the string scalar changes, but that's disconnected from the array reference change.
@@jherr I just found your channel a few days ago and I'm loving all of your content - it's been super helpful. I have a follow-up question here though - since info.roles is an array, why don't you run into an issue with your useMemo dependencies of recreating that object every rerender since arrays are referential equality? I hope my question makes sense. Thanks again! I'm really happy I found your channel!
@@Explosivehippo I'll take a look but, I think it's ok because I'm converting array to a string. And then that string becomes the dependent.
@@jherr Thanks for the quick reply, Jack! Can you point out where it's getting converted to a string? I see you're using JSON.stringify in your render, but that wouldn't mutatate the state value, correct? I'm probably just missing something - thanks again and keep it up!
@@Explosivehippo Sorry man, maybe it's not. I've put up a bunch of videos around this topic and I think I got confused by which one this was. If I get some time I'll have a look later and see if I can be more helpful when it comes to understanding the example.
Does react batch updates from useState and useReducer together? I mean will this cause one re-render?: dispatch({type: ''foo", payload: "some_value"}); setCount(10) where dispatch comes from react's own useDispatch & setCount comes from useState.
AFAIK state updates are batched. But it would be pretty easy to test.
Is it 100% necessary to use useMemo on roleList? I'm asking because every time info changes the component re-renders, therefor roleList can be written like this: const roleList = Object.keys....... and it will be always updated because of the re-rendering. Am I correct or I am missing something?
It's not 100% necessary to use it. But if you have other stuff going on in that component that would also cause re-renders then you might be doing that roleList calculation unnecessarily and creating a new reference each time.
@@jherr Yep, makes perfect sense. Thanks a lot, Jack! I love your videos :}}}
useReducer emit a large action
Hi Jack, I don't understand why your useMemo dependencies is array...? if you use array, you will get new array as long as you render your app
you mean the base dependency array itself? That's not counted as an array ref for the purposes of the dependencies. reactjs.org/docs/hooks-reference.html#usememo
@@jherr I think Golden Monkey meant the info.roles array inside the dependencies array, same as objects, react will shallowly compare them between renderings and the useMemo hook will be re-run, then the useMemo hook is useless, am I correct?
Can we expect backend tutorials in future?
In the next two weeks I'll be doing a backend tutorial.
Vscode theme?
Night Wolf [dark].
The sound on the video is strangely louder on the left than the right speaker
That's weird, I record in mono. Ah well.
I don't know what react team is doing is anymore... it's like they have something in their mind, keep working towards it while breaking all the things one by one, making it less and less efficient...
It's pretty hard when you have to maintain reverse compatibility and also push the feature set forward.
@@jherr yeah! if you're doing something really good then it's fine, but what i feel is intentions are not aligned with dev community ( or at least me. ) just going whatever the direction that facebook wants to go... A great video idea would be to give some details about reacts future (if the details publicized by react team), why and what's happening sort of video.
@@dulanjala I'm just a random guy, so I know about as much as you do (probably even less ;) ). But I can empathize with the React team in that they probably don't want to have a massive breaking change that will cause everyone to re-think sticking with React (a la Angular 1.5 -> 2). For example, I think the reason why we have dependency arrays is that setState in classes was just a value, not an observable. So useState needed to return a value, not an observable, so in order to do make that happen they needed to do dependency arrays and wow, lots of bugs happening from that. Anyway, I do think you are right that the React team's incentives are FB-first and not the dev community. Maybe that's why folks are so into NextJS, because the incentives there are clearly external dev focused and React is the view mechanism, but they layer a lot of value on top of it.
I am really not a fan of react hooks. Iv been using for quite a while now. Everything is so hidden and convoluted.
Your editor font is visually noisy
What a beautiful font. It is immediately clear that the person did not write more than 3 functions in the document, but teaches others by retelling the documentation
yeah? and what have you contributed to society lately? I don't see you publishing helpful videos that explain concepts in meaningful terms that people can understand. instead you're on here adding nothing to the conversation, trolling, and being an ass. Does making comments like this help fill the void of your meaningless existence? Do you feel big and tough spewing negativity in youtube comments? Find something meaningful to do with your life or better yet seek some mental health counselling, this behavior indicates you you might have mommy issues or other deep seeded emotional problems.
It is immediately clear that you are Nerf Herder.
I have one question if i have fetched some data from an api and im setting loading state to false and in the next line of code i'm setting that fetched data inside my context. So will react batch the local component update and the context update or not? Something like this: setIsFetching(false); // local expensesCtx.setExpenses(expenses); // context api
Depends on the React version, but I would either test it and see, or write the code as if both of those will update independently.