All About Rendering

The process of requesting and serving UI has three steps:

1. Step 1: Triggering a render.

2. Step 2: Rendering the component.

3. Step 3: Committing to the DOM.

Step 1: Triggering a render

There are two things that can cause a component to render.

One: It is the initial render of the component.

• This is when the app starts, and you need to trigger the initial render. This is done by calling ReactDOM.render.

• You do this with your root component and the target DOM node.

import ReactDOM from 'react-dom'

ReactDOM.render(<Image />,document.getElementById('root'))

Two: The state of the component has been updated

You can trigger further renders after the initial render by updating the state of the component with setState. This updating automatically queues a render.

Step 2: React renders your components

Rendering is what React does to call your components. It does this to figure out what to display on the screen.

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

• During this initial render, React will create DOM nodes for all html tags like <section> and <h1>.

On the other renderings, React will call the component that has a state that is needing to update.

• On re-renderings, React has to calculate which of the properties have changes. This will not do anything with that information until the next step.

Step 3: React commits changes to the DOM

After rendering, React will modify the DOM.

• On the initial render, React uses the appendChild() DOM API that will put all the DOM nodes it has created on the screen.

• When re-rendering, React applies the minimal necessary operations that are calculated whilst rendering, to make the DOM match the latest rendering output.

• React will only change DOM nodes if there is a visible difference between renders.