How React Handles Rendering?

Before your components are displayed on screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.

You will learn

• What rendering means in React

• When and why React renders a component

• The steps involved in displaying a component on the screen

• Why rendering does not always produce a DOM update.

Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps:

1. Triggering a render (delivering the guest’s order to the kitchen)

2. Rendering the component (preparing the order in the kitchen)

3. Committing to the DOM (placing the order on the table)

Step 1: Trigger a render

There are two reasons for a component to render:

1. It’s the component’s initial render.

2. The component’s (or one of its ancestors’) state has been updated.

Initial render

When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it’s done by calling createRoot with the target DOM node, and then calling its render the method with your component:

Re-renders when state updates

Once the component has been initially rendered, you can trigger further renders by updating its state with the set function. Updating your component’s state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.)

Step 2: React renders your components

After you trigger a render, React calls your components to figure out what to display on the screen. “Rendering” is React calling your components.

• On initial render, React will call the root component.

• For subsequent renders, React will call the function component whose state update triggered the render.

This process is recursive: if the updated component returns some other component, React will render that component next, and if that component also returns something, it will render that component next, and so on. The process will continue until there are no more nested components and React knows exactly what should be displayed on the screen.

Step 3: React commits changes to the DOM

After rendering (calling) your components, React will modify the DOM.

• For the initial render, React will use the appendChild() DOM API to put all the DOM nodes it has created on the screen.

• For re-renders, React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.

Happy Reading.