Optimizing Rendering Performance in React
ฝัง
- เผยแพร่เมื่อ 14 ต.ค. 2024
- 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....
======⚡⚡⚡======
🙌 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/do...
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...
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 😊
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!
Really helpful. Thanks! The useCallback solution is exactly what I've been looking for.
mind-blowing, that's what i was searching for a very long time 🔥🔥
thank you for the great example of real life usage of these hooks! It's so precious among other explanations
Happy to hear that! ❤️
This helps get a deeper insight, very helpful. At least for a beginner like me. Keep up the good work.
Massive thank you!! You explained this perfectly and helped me solve an extremely annoying bug I’ve been dealing with 👏🏼
Happy to hear that! 😊
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?
Bro explained useMemo and useCallback hook in a much easy manner 👏👏
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
Great summary and presentation! Thank you.
You saved my time with this video, thank you!
Thanks bro I'm gonna use this advices for my further project
Watched your 10-15 videos(1st day), amazing Stuff and beautifully explained!!!!
Thans a lot! Glad you like them!
It was a good video.
If you create a playlists on performance optimization, that would be great❤
I will consider it! Thank you 😊
Dude, more! First video I watched and I loved it
Happy to hear mate! More to come :)
Thx for the info will try that later!
It was very helpful, thanks for your efforts
sir can you do a same playlist for nextjs also need some glimpse of how senior software devs are writing code and folder structure in nextjs with scalability for future propects.
Very good analysis, great work
Thanks mate :)
Wow, Thanks a lot bro. Now I understand it
Thank you for this awesome tutorial.
Can I use useMemo on that function instead of useCallback?
Hi, great video. What theme are you using for your vscode?
Thanks! It’s “Atom Dark One” :)
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/
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.
Really useful video!
Thanks for the video.
Sure, thanks for watching 🙂
Thanks ! If I knew this, I would have saved my last job 😅
thank you for this quite helpful info 👍🏻
My pleasure 🤓
That is helpful for my work, Thanks for this vdo
That's awesome, happy to hear!
Cool stuff, thanks
Well explained, good job👍
Glad it was helpful!
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!
great tip
Really helpful, thank you!
Glad to hear! 🙂
well explained 👍 appreciate your content
Thank you mate ✌
Thanks :)
Amazing content! thanks
Thanks mate!
sorry bro , can you give me some thing for my project.
my mernstack project brings some featurs late. so what my be the solution or what is the problem
This was soooo good.
Yaay 🥳
Just wondering why react doesnt do this optimizazion by default?
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
Great job
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)
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.
I can't wait for React 19's compiler to come out so I don't have to bother with this.
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
Quality content!
Thanks mate!
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!
Great job 👏
Thank you! 😃
Thank you
Thank you too 😊
KING
Let's gooo 🤠
Good One Bro..
Thanks ✌️
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 never have to think about all these doing angular or vue.. never have any issue with performance or lagging.. only react.. whyyyy
Eheheheee
You get my sub and turn on bell
Happy to have you here!
Helpfull video. I Nee help.
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