Does React always check the whole tree?

When a component is updated by calling setState, does React execute the difference algorithm in the entire DOM tree or only with its part that belongs to the updated component?

For example, if I have 10,000 components in my application and call setState on a component that has no children (this is a leaf of the tree), React will go through the entire large DOM tree (which will be slow) or only the DOM tree generated by the component (which would be much faster)?

+7
reactjs
source share
1 answer

No, React will not go through the whole tree when you call setState only on the leaf node.

When calling setState, the reaction will only re-render the component (tree node) for which setState was called, and any components (nodes) that are children. It should be noted that React will only update the DOM if there really is a change that needs to be introduced in the setState call.

Vjeux, a member of the React team, wrote a nice blog post that details how the diff reaction algorithm works and how it works when you call setState. Here is the link .

+5
source share

All Articles