profile
viewpoint

Ask questionsBug: Context value change results in rendering of components that do not consume said context

Given the following structure:

<MyContext.Provider value={value}>
  <A>
   <B>
    <C />
   </B>
  </A>
</MyContext.Provider>

A and B will be re-rendered when the context value changes because C is consuming it. This appears to be unnecessary as preventing A (and thus B) from re-rendering still results in changes from C being reflected in the DOM.

This is obviously a performance issue, particularly when the context value changes frequently due to user interaction (in my case, on keystroke of a text field).

This seems like the sort of thing that could very well be intentional and I'm missing some use cases that necessitate this behaviour, but from my sample code and in a complex real-world scenario, short-circuiting the render of A when only "children" change seems to work and with a lot less renders.

React version: Noticed in 16.8.3, confirmed the same behaviour in 16.13.1

Steps To Reproduce

Code example: https://codesandbox.io/s/eager-jones-4xg6e?file=/src/App.js

The current behavior

Components that do not consume the context value directly are re-rendered due to a change in context value

The expected behavior

Only direct consumers of the context value are re-rendered due to a change in context value

facebook/react

Answer questions vkurchatkin

This is how React works. When you update state the component is rerendered, including all of the descendants, unless there is a React.memo somewhere

useful!

Related questions

Disable react strict mode on third party libraries hot 6
Refs - &#34;object is not extensible&#34; hot 4
Warning: Unknown DOM property for. Did you mean htmlFor? hot 4
React@16.9 block `javascript:void(0);` hot 4
TypeError: Object(...) is not a function hot 3
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 3
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 2
useEffect causes 'callback is not a function' exception hot 2
DevTools: Updating state or props in devtools does not trigger component update. hot 2
Infinite loop in useEffect using blank object or array hot 2
False-positive security precaution warning (`javascript:` URLs) hot 2
Hooks API - hook breaks when exported from module hot 2
Function components do not support contextType. hot 2
Feedback on useEffect depndencies change error hot 2
[ESLint] Feedback for 'exhaustive-deps' lint rule hot 2
Github User Rank List