Optimizing Rendering Performance in React
Вставка
- Опубліковано 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 🔥🔥
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!
This helps get a deeper insight, very helpful. At least for a beginner like me. Keep up the good work.
the best useCallback usage and example!
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.
Thx for the info will try that later!
You saved my time with this video, thank you!
Massive thank you!! You explained this perfectly and helped me solve an extremely annoying bug I’ve been dealing with 👏🏼
Happy to hear that! 😊
Watched your 10-15 videos(1st day), amazing Stuff and beautifully explained!!!!
Thans a lot! Glad you like them!
Thanks bro I'm gonna use this advices for my further project
Thank you for this awesome tutorial.
Very good analysis, great work
Thanks mate :)
thank you for the great example of real life usage of these hooks! It's so precious among other explanations
Happy to hear that! ❤️
Really useful video!
Bro explained useMemo and useCallback hook in a much easy manner 👏👏
Wow, Thanks a lot bro. Now I understand it
Well explained, good job👍
Glad it was helpful!
Cool stuff, thanks
Really helpful, thank you!
Glad to hear! 🙂
well explained 👍 appreciate your content
Thank you mate ✌
Great job
That is helpful for my work, Thanks for this vdo
That's awesome, happy to hear!
Dude, more! First video I watched and I loved it
Happy to hear mate! More to come :)
Amazing content! thanks
Thanks mate!
Thanks :)
thank you for this quite helpful info 👍🏻
My pleasure 🤓
Great job 👏
Thank you! 😃
Thanks for the video.
Sure, thanks for watching 🙂
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
This was soooo good.
Yaay 🥳
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?
Quality content!
Thanks mate!
Hi, great video. What theme are you using for your vscode?
Thanks! It’s “Atom Dark One” :)
Thanks ! If I knew this, I would have saved my last job 😅
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.
Thank you
Thank you too 😊
Good One Bro..
Thanks ✌️
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
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!
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.
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
Helpfull video. I Nee help.
I can't wait for React 19's compiler to come out so I don't have to bother with this.
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.
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)
my god! why we dont use these things in our code... thanks for sharing! open some new areas to study.
Happy to hear mate!
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
Just wondering why react doesnt do this optimizazion by default?
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!
I never have to think about all these doing angular or vue.. never have any issue with performance or lagging.. only react.. whyyyy
Eheheheee
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