Optimizing Rendering Performance in React
HTML-код
- Опубликовано: 20 авг 2022
- We are going to use some performance optimization techniques to fix re-rendering issues in our React app that we discovered after performance profiling using React Developer Tools. React Hooks such as useCallback and memo play a big role here. Let's see how they can help here.
======⚡⚡⚡======
Get a 20% discount on Brilliant.org (to learn Science, Technology, Engineering, and Math): brilliant.sjv.io/kjVO2z
======⚡⚡⚡======
🙌 Become my Patreon and get exclusive perks: / softdevdiaries
💼 Follow me on LinkedIn and drop me a message if you'd like: / gusgadirov
💻 Also, let's connect on GitHub: github.com/gusgad
📚 Resources:
React Docs on Optimizing Performance: reactjs.org/docs/optimizing-p...
And don't forget to subscribe for more videos like this 😊
#react #javascript 
Наука
Obviously such optimizations are not necessary with a small number of re-rendered children as long as they are not too heavy. But at what point does memoizing become important? 100 items, 1.000 items or maybe 100.000 items? Share your thoughts here ✌
I want to ask
if I have a lot of element and put them in memo function Will it cause me memory problems?
Try to have a large form of inputs. And control this form via Formik library for validation of user input. Probably (or even highly likely) you'll face some issues with unnecessary re-rendering...
mind-blowing, that's what i was searching for a very long time 🔥🔥
This helps get a deeper insight, very helpful. At least for a beginner like me. Keep up the good work.
I like this channel it deserves more subscribers🔥
you're very calm and your explanation while coding is so clear and straight to the point.
Thank you for your quality content!
I appreciate your feedback my friend!
the best useCallback usage and example!
Massive thank you!! You explained this perfectly and helped me solve an extremely annoying bug I’ve been dealing with 👏🏼
Happy to hear that! 😊
This was a great video. I am brand now to full stack development. Days old. I looked up a video he mentioned to learn about profiling and performance to speed up a build. I looked up some stuff and I go here to your video. The problem for me is I think I am a little too new to full appreciate it yet. I took notes on everything you said and I have bookmarked this. Thank you.
Happy to hear that! Good luck in your journey 😊
It was very helpful, thanks for your efforts
Great summary and presentation! Thank you.
Watched your 10-15 videos(1st day), amazing Stuff and beautifully explained!!!!
Thans a lot! Glad you like them!
Thx for the info will try that later!
You saved my time with this video, thank you!
thank you for the great example of real life usage of these hooks! It's so precious among other explanations
Happy to hear that! ❤️
Thanks bro I'm gonna use this advices for my further project
Very good analysis, great work
Thanks mate :)
Bro explained useMemo and useCallback hook in a much easy manner 👏👏
Thank you for this awesome tutorial.
Really useful video!
Dude, more! First video I watched and I loved it
Happy to hear mate! More to come :)
Well explained, good job👍
Glad it was helpful!
Wow, Thanks a lot bro. Now I understand it
well explained 👍 appreciate your content
Thank you mate ✌
Really helpful, thank you!
Glad to hear! 🙂
That is helpful for my work, Thanks for this vdo
That's awesome, happy to hear!
Cool stuff, thanks
thank you for this quite helpful info 👍🏻
My pleasure 🤓
Amazing content! thanks
Thanks mate!
Great job
Thanks for the video.
Sure, thanks for watching 🙂
Great job 👏
Thank you! 😃
Thanks :)
This was soooo good.
Yaay 🥳
Thank you
Thank you too 😊
Quality content!
Thanks mate!
I've seen code like this in my codebase at work and didn't really get why it was necessary, this kinda makes a lot of sense
It was a good video.
If you create a playlists on performance optimization, that would be great❤
I will consider it! Thank you 😊
But was the memo() of the child input components necessary after the useCallback() addition? Was the callback the only issue, or was memoization of the components themselves also necessary?
Hi, great video. What theme are you using for your vscode?
Thanks! It’s “Atom Dark One” :)
Good One Bro..
Thanks ✌️
Thanks ! If I knew this, I would have saved my last job 😅
very well explained!
Would you please explain virtual DOM and how it updates the RealDOM?
Hey mate! I put it on my list, but in the meantime I found this insightful article, maybe it could help you :)
blog.logrocket.com/virtual-dom-react/
KING
Let's gooo 🤠
And what about the context? Is there a way to improve performance of that? Because since context update one of its values, the whole value gonna be considered as a new one, and all of the components that have hooked useContext will be rendered Iven they have memo on them
Thanks for a great question. I think this might be useful:
stackoverflow.com/questions/57030018/react-context-with-hooks-prevent-re-render
This will not help if we have like 15 - 20 input, radio, uploader, switches.
Because using usecallback for all will be a problem.
memorization technique comes with a cost.
Helpfull video. I Nee help.
Hi, why not putting id, and value in callback dependencies ? so it will be triggered when the id or value changes.
Unless I misunderstood you, this way it will still rerender the whole component.
@@SoftwareDeveloperDiaries Got it, I don't code in hand.
id and value are probably of type 'String' or 'Number', which are both primitive types (includes string, number, boolean etc.) in JS. On each re-render of the parent, anything which is not a primitive data type - it could be an array, a function, or an object - all these are re-created (re-assigned a new reference/location/address in the memory) by the parent component because these are referenced by memory. All the primitive values are not re-created and hence, those do not change on the parent's re-render, which is why we don't need to 'cache' primitive values.
Just wondering why react doesnt do this optimizazion by default?
Nice video about a very common issue. Personally, issues like this is why I believe React needs to go the way of the dodo. Devs shouldn't assume that giving up control over when to render is going to magically make everything simple.
Great point!
can we pass parameters to the useCallback((id: number) => () => setSelectedId(id),[]); ?
Yes, you can:
beta.reactjs.org/reference/react/useCallback
@@SoftwareDeveloperDiaries ah… this example works for me, thanks 👍 e.g. (I need to call useCallback for each list item in a loop, but it’s not allowed)
You get my sub and turn on bell
Happy to have you here!
Handler shouldn't recreate if you lift it above the component, or?
Great point, it won't indeed! There are different opinions on this approach as well as small implications tho: stackoverflow.com/a/62925172
my god! why we dont use these things in our code... thanks for sharing! open some new areas to study.
Happy to hear mate!
I can't wait for React 19's compiler to come out so I don't have to bother with this.
I never have to think about all these doing angular or vue.. never have any issue with performance or lagging.. only react.. whyyyy
Eheheheee
Don’t set the editor to dark mode unless you set browser too. With screen bliking black and white, my eyes hurt. Thanks for great video though.
Thanks for the hint!
Why not just take out the function out of the component instead of using useCallback
Indeed! There are different opinions on this approach as well as small implications tho: stackoverflow.com/a/62925172
I think you mispronounced “use Svelte” 😂
Oh :D
Seems interesting but you speak wet, it's hard to focus
Thanks for the feedback, I'll try to improve it! 🙂
Spot the same