Understanding the React Component Lifecycle: Mounting, Updating, and Unmounting

In projects with many components, releasing resources when a component is destroyed is crucial; each React component maintains its own independent state, and the component lifecycle in the browser consists of three phases: mounting, updating, and unmounting.

1. Mounting

constructor : defines the initialization method.

componentWillMount : invoked once before the first render, a good place to set the initial state.

render : the render phase occurs once; AJAX calls can be placed here.

componentDidMount : runs after the render, ideal for accessing the DOM and can call setState (which will trigger another render).

2. Updating

componentWillReceiveProps(nextProps) : called when a component receives new props from its parent, not invoked on the initial render.

shouldComponentUpdate(nextProps, nextState) : used for component optimization; returns a boolean (default true ). Returning false prevents the update cycle, skipping componentWillUpdate , render , and componentDidUpdate .

componentWillUpdate : executed after shouldComponentUpdate returns true and before render ; not called on the initial render.

render and componentDidUpdate : after an update, render runs again; if setState is called here, ensure proper conditions to avoid infinite loops. componentDidUpdate runs after the DOM is refreshed.

3. Unmounting

componentWillUnmount : invoked just before a component is destroyed; typically used to clear timers, remove DOM event listeners, and prevent memory leaks.

Summary : The React component lifecycle follows the order of mounting methods (constructor → componentWillMount → render → componentDidMount), updating methods (componentWillReceiveProps → shouldComponentUpdate → componentWillUpdate → render → componentDidUpdate), and finally the unmounting method (componentWillUnmount).

Reference: https://www.codevoila.com/post/57/reactjs-tutorial-react-component-lifecycle#toc_3