Does React always check the whole tree?

Question

When a component is updated by calling setState, does React run the diffing algorithm on the whole DOM tree, or only on the part of it that belongs to the updated component?

For example, if I have 10000 components in my app and call setState in a component that has no children (it's a leaf of the tree), will React go through the whole large DOM tree (which would be slow) or only the DOM tree generated by the component (which would be a lot faster)?

Answer 1

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

On call of setState, react will only re-render the component (tree node) for which setState was called on and any components (nodes) which are children. It should be noted that React will only update the DOM if there is actually a change to be represented from the call to setState.

Vjeux, one of the members of the React team, wrote a good blog post detailing how the react diff algorithm works, and how it works when you call setState. Here is the link.