Optimizing Rendering Performance in React

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

[@SoftwareDeveloperDiaries]

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 ✌

[@kasemalolo5587]

I want to ask if I have a lot of element and put them in memo function Will it cause me memory problems?

[@GuestUser-vf9qe]

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...

[@shy6489]

mind-blowing, that's what i was searching for a very long time 🔥🔥

[@muhammadumar5385]

This helps get a deeper insight, very helpful. At least for a beginner like me. Keep up the good work.

[@maximus4510]

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!

[@SoftwareDeveloperDiaries]

I appreciate your feedback my friend!

[@multiverse915]

Bro explained useMemo and useCallback hook in a much easy manner 👏👏

[@rohan7011]

the best useCallback usage and example!

[@JenJHayden]

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.

[@SoftwareDeveloperDiaries]

Happy to hear that! Good luck in your journey 😊

[@AdamFiregate]

Great summary and presentation! Thank you.

[@UsmanTheDev]

It was very helpful, thanks for your efforts

[@tikamikas3245]

Massive thank you!! You explained this perfectly and helped me solve an extremely annoying bug I’ve been dealing with 👏🏼

[@SoftwareDeveloperDiaries]

Happy to hear that! 😊

[@felixdziekan7335]

Thx for the info will try that later!

[@persianman72]

You saved my time with this video, thank you!

[@germanmartinezsolis9543]

Thanks bro I'm gonna use this advices for my further project

[@faridul.hassan]

Thank you for this awesome tutorial.

[@mrunalvaidya388]

Watched your 10-15 videos(1st day), amazing Stuff and beautifully explained!!!!

[@SoftwareDeveloperDiaries]

Thans a lot! Glad you like them!

[@costaszeimpekis994]

Very good analysis, great work

[@SoftwareDeveloperDiaries]

Thanks mate :)

[@rubylnic]

thank you for the great example of real life usage of these hooks! It's so precious among other explanations

[@SoftwareDeveloperDiaries]

Happy to hear that! ❤️

[@stephenfoster6308]

Really useful video!

[@mostafabrazi4228]

Well explained, good job👍

[@SoftwareDeveloperDiaries]

Glad it was helpful!

[@acearvingando6848]

well explained 👍 appreciate your content

[@SoftwareDeveloperDiaries]

Thank you mate ✌

[@ichigoplayss376]

Wow, Thanks a lot bro. Now I understand it

[@kimberlyrojas3421]

Really helpful, thank you!

[@SoftwareDeveloperDiaries]

Glad to hear! 🙂

[@VictorZamanian]

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?

[@archiee1337]

Cool stuff, thanks

[@jorgejorge8878]

Dude, more! First video I watched and I loved it

[@SoftwareDeveloperDiaries]

Happy to hear mate! More to come :)

[@easifier]

thank you for this quite helpful info 👍🏻

[@SoftwareDeveloperDiaries]

My pleasure 🤓

[@kiadtisuk8857]

That is helpful for my work, Thanks for this vdo

[@SoftwareDeveloperDiaries]

That's awesome, happy to hear!

[@andregomes7232]

Amazing content! thanks

[@SoftwareDeveloperDiaries]

Thanks mate!

[@bustopgamer5802]

Great job

[@havefun5519]

Thanks for the video.

[@SoftwareDeveloperDiaries]

Sure, thanks for watching 🙂

[@devcode9715]

Great job 👏

[@SoftwareDeveloperDiaries]

Thank you! 😃

[@davidcunha7615]

Thanks :)

[@friendsfair9283]

It was a good video. If you create a playlists on performance optimization, that would be great❤

[@SoftwareDeveloperDiaries]

I will consider it! Thank you 😊

[@yaakovhassoun8965]

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

[@ToastRusk]

This was soooo good.

[@SoftwareDeveloperDiaries]

Yaay 🥳

[@hillelspivakov3140]

Hi, great video. What theme are you using for your vscode?

[@SoftwareDeveloperDiaries]

Thanks! It’s “Atom Dark One” :)

[@zainkhas93]

Quality content!

[@SoftwareDeveloperDiaries]

Thanks mate!

[@mohdsahil226]

very well explained! Would you please explain virtual DOM and how it updates the RealDOM?

[@SoftwareDeveloperDiaries]

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/

[@user-ut4hj7kc1t]

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

[@SoftwareDeveloperDiaries]

Thanks for a great question. I think this might be useful: stackoverflow.com/questions/57030018/react-context-with-hooks-prevent-re-render

[@keerthanachar]

Thank you

[@SoftwareDeveloperDiaries]

Thank you too 😊

[@mohammadnoushadsiddiqi2550]

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.

[@randompointlessness2766]

Thanks ! If I knew this, I would have saved my last job 😅

[@PraveenKumaran-wh5gn]

Good One Bro..

[@SoftwareDeveloperDiaries]

Thanks ✌️

[@suryakumara3360]

Hi, why not putting id, and value in callback dependencies ? so it will be triggered when the id or value changes.

[@SoftwareDeveloperDiaries]

Unless I misunderstood you, this way it will still rerender the whole component.

[@suryakumara3360]

@@SoftwareDeveloperDiaries Got it, I don't code in hand.

[@jagjot1697]

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.

[@coolmind2476]

Just wondering why react doesnt do this optimizazion by default?

[@oleksandrluchytskyi6867]

can we pass parameters to the useCallback((id: number) => () => setSelectedId(id),[]); ?

[@SoftwareDeveloperDiaries]

Yes, you can: beta.reactjs.org/reference/react/useCallback

[@oleksandrluchytskyi6867]

@@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)

[@hund1267]

Handler shouldn't recreate if you lift it above the component, or?

[@SoftwareDeveloperDiaries]

Great point, it won't indeed! There are different opinions on this approach as well as small implications tho: stackoverflow.com/a/62925172

[@mase-ob1vf]

KING

[@SoftwareDeveloperDiaries]

Let's gooo 🤠

[@symphony86]

I never have to think about all these doing angular or vue.. never have any issue with performance or lagging.. only react.. whyyyy

[@SoftwareDeveloperDiaries]

Eheheheee

[@netssrmrz]

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.

[@SoftwareDeveloperDiaries]

Great point!

[@vaibhavsalve2024]

Helpfull video. I Nee help.

[@juliansyah4byte57]

You get my sub and turn on bell

[@SoftwareDeveloperDiaries]

Happy to have you here!

[@rjwhite4424]

I can't wait for React 19's compiler to come out so I don't have to bother with this.

[@Amamamamwnwb]

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.

[@SoftwareDeveloperDiaries]

Thanks for the hint!

[@anjanakaruna4095]

my god! why we dont use these things in our code... thanks for sharing! open some new areas to study.

[@SoftwareDeveloperDiaries]

Happy to hear mate!

[@timelimitexceeded0]

Why not just take out the function out of the component instead of using useCallback

[@SoftwareDeveloperDiaries]

Indeed! There are different opinions on this approach as well as small implications tho: stackoverflow.com/a/62925172

[@AkioJunichiro]

Seems interesting but you speak wet, it's hard to focus

[@SoftwareDeveloperDiaries]

Thanks for the feedback, I'll try to improve it! 🙂

[@jarosawwanatowicz4139]

Spot the same

[@bradyfractal6653]

I think you mispronounced “use Svelte” 😂

[@SoftwareDeveloperDiaries]

Oh :D