ReactIntermediate#fundamentals#performance

What is the virtual DOM and reconciliation?

React builds a lightweight tree describing the UI, compares the new tree against the previous one, and applies the minimal set of real DOM operations. Keys and element types drive whether a node is reused or recreated.

Example
// changing only the text
<li>Old</li> -> <li>New</li>
// React updates the text node only, not the <li>

Related Questions

1
ReactBeginner#lists

Why do lists need keys?

Open
2
ReactBeginner#hooks#state

What is useState and how do you update state correctly?

Open
3
ReactIntermediate#hooks#effects

Explain useEffect and its dependency array.

Open