Render and Commit

React renders the DOM on init, and when a component updates. When a component updates, the minimal changes will be made to the DOM to complete the update; this is determined upon initial render.

Trigger

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.

Render

After you trigger a render, React calls your components to figure out what to display on 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

Commit

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 screen.

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