Implementation of diff algorithm in React JS

The implemataion of a diff algoritam is vital in web development utilising ReactJS for optimising the rendering and updating of web application components. The virtual DOM in React effectively calculates and applies the differences between component states in the old and new states, resulting in fewer updates and better speed. React executes a process known as reconciliation when changes to the application's state occur. During this process, it compares the old and new virtual DOM representations to determine whether specific alterations are required. React minimises the number of DOM changes, resulting in faster rendering and a more seamless user experience by accurately identifying the differences and updating just the essential user interface (UI) components. React's use of the diff algorithm ensures effective updates while respecting the integrity of and consistency of the UI in web applications.

As evident from its name, the main work of a diff algorithm is to find a heuristic to change anything from a state to another. Let’s say there is a text A and with the minimal number of steps, it has to be changed to text B. The basic idea is to find a ‘modification script’ that will turn Text A into Text B. The scripts includes insertion and deletion. Usually, the minimal number of changes is required, but some application might also have to weigh the operations depending on how much text each one affects, or other factors.

Why is it needed to React?

The first time we render a react JS component, a tree of all the elements is made(point A). On the next update of any state or prop element, the render() function is called again to update a different set of react elements(point B), what react needs is to identify the fattest/ minimal utilization of resources to react from point A to point B. The general solution to this problem has a complexity in the order of O(n3), where n is the number of elements in the tree.

How React approached this problem?

If we used the above approach in React, displaying 1000 elements would require in the order of one billion comparisons. This is far too exhausting and time taking. Instead, React implements a heuristic O(n) algorithm based on two assumptions:

Two elements of different types will produce different trees.
The developer can hint at which child elements may be stable across different renders with a key prop.

1 Different root element

If the root element is different , it completely tears down the old tree and begins from the root of the new tree

Example:

In the above case, it will unmount(componentWillUnmount) point A and mount (componentWillMount followed by componentDidMount) point B.

2 Same root element

If the root element is the same, then the algorithm compares each and every difference in attributes keeps the same valued attributes and changes only the new/differed attributes.

By comparing these two elements, React knows to only modify the className on Point 2.
When updating style, React also knows to update only the properties that changed.

3 All the Elements are Of The Same Type

When a component updates, the instance stays the same so that state is maintained across renders. React updates the props of the underlying component instance to match the new element, and calls componentWillReceiveProps() and componentWillUpdate() on the underlying instance.

Next, the render() method is called and the diff algorithm recurses on the previous result and the new result.

4 Recursion on Child elements

React generates a mutation comparing each and every element of the previous and the new list.