React Context and Re-renders
In this post, we'll dive into how re-renders happen in the situation of React Context.
I want us to understand how it works and also how you can optimize if needed.
Recap of using Context
Let's quickly look at some code t...

Tiger's Place

Learn how to optimize React Context to minimize re-renders. The post covers evaluating the causes of re-renders, splitting context into multiple contexts, using the useMemo hook for memoizing context values, and leveraging React.memo for state from higher components. Practical code examples are provided to demonstrate these optimization techniques.

Optimizing React Context and Re-renders

Permalink When will a component re-render?

Permalink Evaluate what's causing the re-renders

Permalink useMemo on the value passed to Provider

Nice informative read 👍 and another 👍 for Sage Mode Naruto. The article could have been improved by analyzing also the improvements brought by react 19 compiler.
I used to do this too, until I completely questioned the approach because IMO this technique feels like recreating atomic state.
Considering the very low overhead, I would prefer to use <a href="https://github.com/nanostores/nanostores" target="_blank" rel="noopener nofollow">nanostores</a>, <a href="https://jotai.org" target="_blank" rel="noopener nofollow">jotai</a> straight-away instead of dealing with contexts.

Thanks for sharing, I structure my context the same way;
I’ve had an interview in the past where the interviewer was insistent that all children of a provider (whether they consume the context or not) will re-render. I was adamant that wasn’t the case but this ended up in not getting that job at the time.

do we get to naruto the context??