React Context: When Are Children Re-Rendered?

In another StackOverflow post, Nicholas helped me understand that a Context.Provider re-renders its descendant Context.Consumer components when the context value the Provider provides changes.

That is further confirmed by the official Doc:

All consumers that are descendants of a Provider will re-render
whenever the Provider’s value prop changes.

Nicholas also helped me understand that the only way a Provider will know if the context value has changed, is if its enclosing component re-renders.

In summary:

  1. Providers update its Consumers whenever the context value changes
  2. This can only happen when the enclosing function around the Provider re-renders
  3. Which leads to the Provider and all its descendants re-rendering anyways

Thus, the feature in (1) above, seem redundant. If Provider ever only updates Consumers when its enclosing component re-renders, and spotting a context value update can only happen when the parent re-renders, there is no need to have the feature that allows the Provider to update the Consumers when the context value changes.

What am I missing here?


EDIT

Nicholas also says in a comment:

App can (conceivably) rerender due to things that have nothing to do
the value its providing via context. If this happens, you do not want
the consumers to rerender. For that to happen, you need the value
before and the value after to pass a === check. If you’re providing an
object, that means you can’t create a brand new object in App’s render
method, or you’ll end up rerendering consumers unnecessarily.

However, I was under the impression that when a parent re-renders, all its children will also re-render. Thus, the === check mentioned above would not help, i.e. the children would re-render regardless.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

3) Which leads to the Provider and all its descendants re-rendering anyways

While this is the default behavior, in practice it’s common to change this in order to improve performance. Pure components, components that implement shouldComponentUpdate, or components using React.memo will cause the rerendering to stop before going through the entire tree.

For example: suppose there’s a toplevel component with some state, which renders a midlevel component that has shouldComponentUpdate() { return false; }, which renders a bottom level component. On the initial mount, all 3 of these will render. But then if the toplevel component updates its state, only the toplevel component will rerender. The midlevel component will be skipped due to its shouldComponentUpdate, and then the bottom level component is never even considered.

Now we add in a context provider to the toplevel component, and a context consumer to the bottom level component. On the initial mount, they will again all render. If the toplevel component updates its state, it will rerender. The midlevel component will still skip its render, due to its shouldComponentUpdate. But as long as the context value changed, the bottom level component will rerender, even though its parent bailed out. This is the feature that is referred to by that blurb.

Method 2

This behavior isn’t really new. When a react component receives a different set of props, (assuming the shouldComponentUpdate() returns true) it will re-render its children, and the effect will cascade down.

So, if you have a setup like this:

<ParentComponent>
  <Provider>
    <Context>
      <ChildReceivingContext />
    </Context>
  </Provider>
</ParentComponent>

If Provider ever only updates Consumers when its enclosing component re-renders,

When parent component re-renders, the effect will cascade downwards, and components will update if shouldComponentUpdate() return true.

there is no need to have the feature that allows the Provider to update the Consumers when the context value changes.

What am I missing here?

I believe what you’re missing is that there is no such feature. That’s just how react works.

The actual feature from Provider/Consumer, is the fact that you don’t have to manually pass down props from parent to child to sub child etc, but you can have a children deep down to be enclosed by a provider and receive the prop directly.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x