Optimizing Performance of React Context

In this React Context tutorial, we're gonna try to optimize our Context and avoid rerendering the components on every Context value update.
Consider supporting the channel by clicking the "Thanks" button ❤️
🙌 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:
Code: github.com/gusgad/youtube-tut...
Official docs on Context optimization in React: react.dev/reference/react/use...
Cleaner React Contexts: mirone.me/performance-optimiz...
And don't forget to subscribe for more videos like this 😊
#react

[@hamidhamri5384]

No way a channel like this has only 4k, keep up my man, I see you in 100k soon ❤

[@SoftwareDeveloperDiaries]

Appreciate it, my friend!

[@nazmussakib5799]

Thanks a lot for sharing

[@DiogoLScarmagnani]

Then it's very useful if we use useCallback for functions inside my provider and also useMemo for the provided values?

[@numericalwallah9174]

What if its object i mean when i use usereducer and state is in object at i want to pass state directly os there any good way

[@aram8639]

👍🏻 i like it

[@SoftwareDeveloperDiaries]

Thank you 😊

[@code_react]

All the devs who works in my team. I ask them to divide the component into very small chunks.

[@GrowthBhavsec]

Sir, i believe your LinkedIn link doesn't work anymore so could you please update me with that, Thank you

[@juliansyah4byte57]

like performance video

[@SoftwareDeveloperDiaries]

Will do more of these 👍

[@jonathangamble]

Why not just import signals from preact… obviously it would be better if that were built in.

[@SoftwareDeveloperDiaries]

Exactly. This time with the vanilla React tho :)

[@nataneldemissew3426]

the memo on children is unnecessary. ur right that useMemo on the value passed to the context is one issue bu another issue is that u have a state in the app that updates when u click update session, therefore rerendering all components displayed there. if u remove the context all together, u will still see the children rerendering even if they dont have memo. In this scenario, u shouldnt have a state in the app that is passed to the parent, the session id shouldnt be in the parent to avoid rerendering mistake #1 if u do that, u shouldnt need to memoize the children. I think..

[@nataneldemissew3426]

the session id should be in the parent, not in app. it triggers rerender of all components there.

[@user-gn9ns7um2y]

thanks🤏

[@asiraky]

Your explanation is incorrect. It’s got nothing to do with the currentUserId state variable being different on each render. It because you are creating a new object out of it on each render.

[@SoftwareDeveloperDiaries]

I meant exactly what you stated by “being different”, just the wrong wording :)

[@asiraky]

If you’re goal is to teach people then your explanation should be accurate. Even the fact that you’re mentioning the state being reinstatiated at all is leading down the wrong path, as the state value of the useState in your case is a primitive, meaning it is referentially equal to the previous value. That might not seem like a big deal, but it is a huge deal as it means the state has literally nothing to do with the re-render but you made a point out of it as though it is. My suspicion is you don’t actually know what you’re on about. It wasn’t just bad wording.