React Reconciliation And Diffing Tutorial

reconciliation and diffing

1. 1The process React uses to update the UI when state or props change is called Reconciliation.
2. 2React creates a new Virtual DOM tree and compares it with the previous one.
3. 3This comparison process is done by using a algorithm called the Diffing Algorithm.
4. 4The diffing algorithm helps React find exactly what changed in the UI.
5. 5React compares if the node types, attributes, and child elements are the same or not.
6. 6If node types are different, React replaces the old node with the new one.
7. 7If node types are the same, it updates only the changed attributes or text.
8. 8Like Initial node : <div>Hello World</div>
9. 9Updated node : <div>Hello React</div>
10. 10React will update only the text from Hello World to Hello React and not the whole node (Html tag + text) <div>Hello World</div>.
11. 11This selective update avoids full re-rendering of the DOM.
12. 12React uses keys in lists to track added, changed, or removed items efficiently.
13. 13This entire process makes UI updates fast and improves app performance.