DEV Community

Rounit Ranjan Sinha
Rounit Ranjan Sinha

Posted on

React .diff algo!

.diff(diffing)algorithm in React
it compares the old DOM to NEW.

We all know Reacts is fast as it uses Virtual DOM Tree
React uses the Reconciliation algorithm to compare the previous TREE to the new TREE, but the TC will be in O(n^3), so react uses some heuristics to make it in O(n)

-> Two assumptions:
1) Different elements produce different trees
React will parse the tree using, for a node of tree, if the element type is changed, (for example from β€˜section’ to β€˜div’). React will destroy all the sub-tree under that element and will reconstruct it from scratch.

2)The developer can hint at what elements will remain stable across renders with a key prop. (This is why React is always warning us to include keys in our props).

Top comments (0)