When a component’s state changes, React needs to bring the browser view up to date. Its virtual DOM is an in-memory representation of the view. React compares what changed before updating the actual browser DOM; you update state rather than changing page elements yourself. section 1.1.1 section 1.1.2
Changing paragraph text
Suppose component state supplies the text of a <p> element. If that text changes, React updates the text in the browser rather than replacing the whole paragraph element. This is especially useful in interfaces with many changing elements. section 1.1.2
Figure 1.2 Once a component has been rendered, if its state changes, it’s compared to the in-memory virtual DOM and re-rendered if necessary.
Follow a state change from an already-rendered component through the in-memory comparison to a browser update, if one is needed. section 1.1.2
This comparison is called DOM diffing or reconciliation. It also supports component testing without starting a headless browser; Jest and React Testing Library are named options. The details of the reconciliation algorithm are a separate, more advanced topic. section 1.1.1 section 1.1.2
