What is Life Cycle method in React?

In React, lifecycle methods are special methods that are automatically called at different stages of a component’s life cycle.
They allow you to control what happens when a component is created, updated, or destroyed.

Contents

Phases of React Component Lifecycle:Lifecycle Methods in Class Components:Summary Table (Lifecycle Methods Overview):React Lifecycle Diagram (Visual Summary):Lifecycle Methods in Functional Components (React Hooks Approach):Key Takeaways:When to Use Lifecycle Methods (Hooks):

Phases of React Component Lifecycle:

React class components have three main lifecycle phases:

Phase	Description
Mounting	When the component is created and added to the DOM.
Updating	When the component is re-rendered due to state or prop changes.
Unmounting	When the component is removed from the DOM.

Lifecycle Methods in Class Components:

1. Mounting Phase (Component is Created)

Method	Description
`constructor()`	Initialize state and bind methods.
`static getDerivedStateFromProps()`	Sync state with props before render (rarely used).
`render()`	Render JSX to the DOM.
`componentDidMount()`	Called after the component is rendered to the DOM → Ideal for API calls.

2. Updating Phase (Component Re-renders)

Method	Description
`static getDerivedStateFromProps()`	Sync state with props when props change (rarely used).
`shouldComponentUpdate()`	Control if component should re-render (optimize performance).
`render()`	Renders JSX again.
`getSnapshotBeforeUpdate()`	Capture DOM state before the update (e.g., scroll position).
`componentDidUpdate()`	Called after the component re-renders → Ideal for side effects after updates.

3. Unmounting Phase (Component is Removed)

Method	Description
`componentWillUnmount()`	Called before the component is removed from the DOM → Clean up tasks like timers, event listeners, API calls, etc.

Summary Table (Lifecycle Methods Overview):

Phase	Method	Purpose
Mounting	`constructor()`	Initialize state, bind event handlers.
	`getDerivedStateFromProps()`	Sync state from props before rendering.
	`render()`	Render the component.
	`componentDidMount()`	Perform side effects like data fetching, subscriptions.
Updating	`getDerivedStateFromProps()`	Sync state from props before update.
	`shouldComponentUpdate()`	Optimize rendering (e.g., prevent unnecessary re-renders).
	`render()`	Re-render component.
	`getSnapshotBeforeUpdate()`	Capture DOM information before update.
	`componentDidUpdate()`	Perform side effects after component updates.
Unmounting	`componentWillUnmount()`	Clean up side effects (e.g., cancel subscriptions, timers).

React Lifecycle Diagram (Visual Summary):

luaCopyEditMOUNTING
|-- constructor()
|-- getDerivedStateFromProps()
|-- render()
|-- componentDidMount()

UPDATING (state/props change)
|-- getDerivedStateFromProps()
|-- shouldComponentUpdate()
|-- render()
|-- getSnapshotBeforeUpdate()
|-- componentDidUpdate()

UNMOUNTING
|-- componentWillUnmount()

Lifecycle Methods in Functional Components (React Hooks Approach):

With Hooks, we use:

useEffect() – Handles side effects (combines componentDidMount, componentDidUpdate, componentWillUnmount).
useState() – Manages state.
useMemo(), useCallback(), etc. – Optimize performance.

Example:

javascriptCopyEditimport { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  // ComponentDidMount + ComponentDidUpdate
  useEffect(() => {
    console.log('Component rendered or updated');
  });

  // ComponentDidMount (runs only once)
  useEffect(() => {
    console.log('Component mounted');
  }, []);

  // ComponentWillUnmount
  useEffect(() => {
    return () => {
      console.log('Component unmounted');
    };
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

Key Takeaways:

Feature	Description
Lifecycle Methods	Special methods in class components to manage component behavior during mounting, updating, and unmounting phases.
Class vs Functional	Class Components: Use lifecycle methods. Functional Components: Use Hooks (useEffect).
Hooks Replacing Lifecycle	`useEffect()` combines componentDidMount, componentDidUpdate, componentWillUnmount.

When to Use Lifecycle Methods (Hooks):

✅ Fetching Data → componentDidMount() / useEffect().
✅ Clean Up Subscriptions, Timers → componentWillUnmount() / useEffect() with a cleanup function.
✅ DOM Updates after Render → componentDidUpdate() / useEffect().

Modern React development primarily uses functional components with hooks, but understanding lifecycle methods is still valuable, especially when working with older class-based codebases.