Understanding Context

When a Context provider has a new Context value, all Context consumers receive the new value and re-render. This means the value in the provider is propagated to all the consumers. It is important for us to understand how Context propagation works and its limitations.

How Context propagation works

If you use a Context provider, you can update the Context value. When a Context provider receives a new Context value, it triggers all the Context consumer components to re-render.

It's sometimes the case that a child component re-renders for two reasons—one because of the parent, and the other because of the Context.

To stop re-rendering without Context value changes, in this case, we can use the lift content up technique, or memo. memo is a function to wrap a component and is used to prevent re-renders if the component props don't change.

Let's see an example with some components wrapped with memo to understand its behavior.

...