Understanding the rendering process
When the data that a React component relies on changes, whether it is through updated props or a modified state, React needs to update the UI to reflect those changes. The process is called rendering, and is composed of the following steps:
- Initial render: When a functional component is first rendered, it generates a virtual representation of the component’s UI. This virtual representation describes the structure and content of the UI elements.
- State and props changes: When there are changes in the component’s state or props, React re-evaluates the component’s function body. It performs a diffing algorithm to compare the previous and new function bodies, identifying the differences between them.
Note
In React, a diffing algorithm is an internal mechanism that compares previous and new virtual Document Object Model (DOM) representations of a component and determines the minimal set of changes needed to update...
