Menu
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)?
589
Answer: D is the correct option. React. js is a free, open-source front-end JavaScript library used for building user interfaces or UI components.
Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
React schedules a render every time the state of a component changes. Scheduling a render means that this doesn't happen immediately. React will try to find the best moment for this. Changing the state means that React triggers an update when we call the setState function (in React hooks, you would use useState ).
React goes through its virtual DOM ,creates a list of those changes that need to be made to the actual DOM and then does it all in one single process. In fancy words, React does batch updates. So putting all pieces together, Reconciliation = Render + Diffing occurs in between + Commit.
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.
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
