Before components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes.
Imagine that components are cools in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts request from customers and brings them their orders. This process has 3 steps:
- Triggering
This is when React delivers the guests order to the chef. There are only two reasons for React to trigger a render 1. It’s the component’s initial render. 2. The components state has been updated.
The most important part of triggering is to remember that the component is placed in a queue and will be executed FIFO.
2. Rendering
This is when the component is prepared by the chef. Once React actually calls the “trigger” from the queue this is called rendering.
On initial render, react will call the root component and create DOM nodes.
On subsequent re-renders, React will call the function component whose state update triggered the render and calculate which properties have changed since the previous render.
3. Commiting
This is when food is actually brought out.
On the initial render, React will use 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 to make the DOM match the latest rendering output.
