What are the different phases of component lifecycle?
The component lifecycle has three distinct lifecycle phases:
Mounting: The component is ready to mount in the browser DOM. This phase covers initialization from
Updating: In this phase, the component get updated in two ways, sending the new props and updating the state either from
forceUpdate(). This phase covers
Unmounting: In this last phase, the component is not needed and get unmounted from the browser DOM. This phase includes
It's worth mentioning that React internally has a concept of phases when applying changes to the DOM. They are separated as follows
Render The component will render without any side-effects. This applies for Pure components and in this phase, React can pause, abort, or restart the render.
Pre-commit Before the component actually applies the changes to the DOM, there is a moment that allows React to read from the DOM through the
Commit React works with the DOM and executes the final lifecycles respectively
componentDidUpdate()for updating, and
React 16.3+ Phases (or an interactive version)
Before React 16.3
November 06, 2022ReactJS