React rendering

Rendering is the process during which React moves down the component tree starting at the root, looking for all the components flagged for update, asking them to describe their desired UI structure based on the current combination of props and state. For each flagged component, React will call its render() method (for class components) or FunctionComponent() (for function components), and save the output produced after converting the JSX result into a plain JS object, using React.createElement().
After collecting the render output from the entire component tree, React will diff the new tree (the virtual DOM) with the current DOM tree and collect the list of changes that need to be made to the DOM to produce the desired UI structure. After this process, known as reconciliation, React applies all the calculated changes to the DOM.
Conceptually, this work is divided into two phases:

• Render phase: rendering components, calculating changes
• Commit phase: applying the changes to the DOM

Conceptually, this work is divided into two phases:

• Render phase: rendering components, calculating changes
• Commit phase: applying the changes to the DOM

After the commit phase is complete, React will run componentDidMount and componentDidUpdate lifecycle methods, as well as useLayoutEffect() and, after a short timeout, useEffect() hooks.
Two key takeaways here are the following:

• Rendering is not the same as updating the DOM

From 30-seconds-of-code: rendering