React Rendering Explained: A Beginner’s Guide

Rendering in React.js can be considered into two phases

• Render Phase --> During this phase, React determines how the UI should look by calculating changes to the virtual DOM based on updated state or props. This process is purely computational and does not interact with the real DOM.

• Commit Phase --> React applies the calculated changes to the actual DOM.

When does React Re-render?

• The state or props of a component changes.

• The parent component re-renders, causing its children to re-render.

  You can prevent unnecessary re-render using optimizations like React.memo and useCallback.

Virtual DOM

React uses a virtual DOM to minimize interactions with the real DOM, which are costly in terms of performance and cause unnecessary re-render.

The virtual DOM is an in-memory representation of the actual DOM elements. It's lightweight copy of the real DOM.

try to console.log(YourComponent());

You will see that the JSX code has been parsed to a React Element. A React Element is simply a representation of DOM element in the Virtual DOM.

Reconciliation

Reconciliation involves identifying the difference in the previous virtual DOM and the new Virtual DOM and efficiently updating those parts in the actual DOM.

Diffing Algorithm

Diffing algorithm is used to differentiate the virtual DOM trees for efficient updates. React utilize diffing algorithm to identify the changes in the newly created virtual DOM and previous version of DOM after any chages are made.

HOW DIFFING ALGORITHM WORKS?

• Element Comparison --> It checks if the elements at the same position in the tree have the same type (e.g <div> to <div>). If they are different it replaces the entire subtree.

• Keyed Element --> React uses keys to identify elements, helping to preserve the structure of the list and minimize re-renders.

  Note -- Don't use the index as key when new element is added then whole tree will be re-rendered.

Commit Phase

-- React updates the real DOM with the precise changes detected during the diffing phase. Only the components that have undergone changes are updated to optimize performance and prevent unnecessary re-renders.

-- The Commit Phase ensures that React efficiently updates the actual DOM, triggers side effects, and maintains a smooth user experience by minimizing re-renders and executing updates in a tightly controlled manner. This phase marks the point at which the changes made in the virtual DOM become visible to the user.

Summery

• JSX : You write your UI in JSX, which gets converted into JS via Babel (transcompiler).

• React Elements : JSX is transpiled into React elements, which describe the intended structure of the UI .

• Virtual DOM : React uses the React elements to construct a virtual DOM, a lightweight representation of the actual DOM.

• Diffing Algorithm : React compares the new virtual DOM with the previous one using a diffing algorithm. This determines which parts of the UI have changed.

• Reconciliation : Based on the diff, React determines the most efficient way to update the real DOM (this is the reconciliation process).

• Commit to the Actual DOM : The final phase applies those changes to the real DOM, ensuring only the necessary updates are made.