Understand React Lifecycle

3 min readOct 26, 2025

Most React devs throw around words like Fiber, Reconciliation, and Lifecycle as if they understand them, until something breaks and useEffect turns into chaos.
Let’s strip the sugar and talk about what’s actually happening under the hood, how React decides what to render, when to render, and why your component behaves the way it does.

Before diving in,

I have attached all the links of my research at the end of the blog.
Terms which are used here are LEGACY (implemented on Class Components), hence I will be discussing only the theory.
Yes, these topics are LEGACY, but gives you foundation on how React works under the hood.

React Lifecycle

Before you go fancy with hooks, you need to know what React’s doing in the background. Every React app contains component, each components goes through 3 phases - mounting, updating, unmounting, where you monitor and manipulate the component. Each of these phases contains different methods, that can be called.

Mounting

The process of inserting a component into the DOM for the first time in a react application. Mounting has 4 methods, in which render( ) will be always called by default.

constructor ( ) — This method is called when the component is initialized first. Called with initial state and props.
getDerivedStateFromProps ( ) — This method is used to update the state based on props. Called before render( ).
render( ) — This method is responsible for rendering the UI part of the component based on the changes of state & props.
componentDidMount( ) — This method is called after rendering the UI onto DOM, usually tasks like API calls are done here.

Updating

Process of a component being re-rendered due to changes in its state or props. This phase occurs whenever a component’s internal state is modified or its parent component passes new props. Has 5 methods, in which render( ) will be always called by default.

getDerivedStateFromProps( ) — This works similar as in Mounting phase. The updated values are majorly derived from parent class.
shouldComponentUpdate( ) — This method gives an power to developers, where they can decide whether the component should re-render.
render( ) — This method renders the changes onto the DOM.
getSnapShotBeforeUpdate( ) — In this method you have access to the previous values of the props meaning you can check what the values were before the. If this method is present, you should also include the componentDidUpdate() method.
componentDidUpdate( ) — This method is invoked after the updated component is rendered. It is used for fetching new data.

Unmounting

This is the final phase of the lifecycle of the component. This is a process of removing the entire component from the DOM, consist of single method.

componentDidUnMount( ) — This function gets invoked once before the component is removed from the page, indicating that the component is removed successfully.

So this is how React render’s your component behind the hood, in the newest version, these phases and methods are replaced by the concept of hooks. Where mainly useEffect hook handles the three phases (mount, update, unmount), useState handles the constructor() method and useMemo handles shouldComponentUpdate() method.