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.

---

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.