liveBook · Manning

DOM diffing

As explained in React Quickly, Second Edition

A technique that compares an existing and a new interface representation to determine the minimal view updates required.

When state changes, React uses a virtual DOM to find the difference between the existing browser view and the new view. This is DOM diffing, also called reconciliation: bringing state and view back into agreement. section 1.1.1

Update state instead of changing page elements yourself. React handles the needed view updates; with jQuery, you would manipulate the DOM and keep it aligned with the data manually. section 1.1.1

A conditional link

A component can return a Login link when `user.session` is absent and a Logout link when it is present. React handles the view update without a direct DOM edit. section 1.1.1

How React Quickly, Second Edition covers it

How deep it goes
Defines reconciliation through a virtual DOM delta but does not detail the comparison algorithm.
Examples
Contrasts React updates with imperative jQuery DOM changes and uses a conditional Login or Logout link.
What you can do after
Apply it via React by updating state and leaving view changes to React.
How it connects
Connects DOM diffing to the virtual DOM, state, reconciliation, and DOM manipulation.
Cover of React Quickly, Second Edition
liveBookmanning.com
Read React Quickly, Second Edition on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of React Quickly, Second Edition. The section links point to the parts of the book it draws on.