Assumption for Diffing Algorithm
React uses a heuristic algorithm called the Diffing algorithm for reconciliation based on these assumptions:
- Elements of different types will produce different trees
- We can set which elements are static and do not need to be checked.
React checks the root elements for changes and the updates depend on the types of the root elements,
- Element in different types: Whenever the type of the element changes in the root, react will scrap the old tree and build a new one i.e a full rebuild of the tree.
- Elements of the same type: When the type of changed element is the same, React then checks for attributes of both versions and then only updates the node which has changes without any changes in the tree. The component will be updated in the next lifecycle call.
Note: This is the reason why we should always use unique keys in the elements so that it will be easy for React to determine changes in the elements.
What is Diffing Algorithm ?
Diffing Algorithm in React JS differentiates the updated and previous DOM of the application. DOM stores the components of a website in a tree structure. React uses virtual DOM which is a lightweight version of the DOM. The only difference is the ability to write the screen like the real DOM, in fact, a new virtual DOM is created after every re-render.
Contact Us