React was one of the first frameworks I learned back in university, and working with it always brings a sense of nostalgia. In this blog, I’ll explain how rendering works in React.
Before we start, let’s define what is Rendering? Rendering is the process of generating HTML markup to display web pages in the browser. Rendering in React involves transforming React components into the actual DOM elements that users interact with on a webpage. It encompasses the creation of HTML markup and updating the user interface based on changes in the data. Let’s see this in detail.
Initial Rendering
Initial rendering is the process of converting React components into the initial HTML that is displayed on the page. When a React application starts, it mounts components to the DOM. Mounting is the phase in which a React component is created and inserted into the DOM. During the mounting phase, React sets up the component tree and renders the initial UI based on the current state and props.
Re-rendering
Re-rendering happens when updating the UI to reflect changes in the state or props of a component. It occurs when the state or props of a component change. React detects these changes and schedules a re-render for the affected components and their children.
React optimizes re-rendering using a Virtual DOM, which minimizes direct DOM manipulations by updating only the parts of the DOM that have changed. This is achieved through a process called reconciliation.
What is the Virtual DOM and Reconciliation
The Virtual DOM is a lightweight representation of the actual DOM. React uses the virtual DOM to compute changes before updating the actual DOM, which is computationally expensive. The virtual DOM allows React to perform efficient updates by computing the minimum number of changes needed to synchronize the UI with the current state.
On the other hand, Reconciliation is the process of comparing the current virtual DOM with the previous one to determine the minimal set of changes required to update the actual DOM. This involves diffing algorithms to efficiently update only the necessary parts. Reconciliation ensures that the DOM is updated in the most efficient manner possible, reducing the performance cost of updates.
Commit Phase
This is the phase where the changes calculated during the reconciliation phase are applied to the actual DOM. This phase involves applying the computed changes, such as adding, removing, or updating elements in the DOM. The commit phase ensures that the UI is synchronized with the virtual DOM’s latest state, making the updates visible to the user.