Component Lifecycle in React

React’s Component Lifecycle refers to the sequence of methods that are invoked at different stages of a component’s existence. It provides hooks to run code at specific points during a component’s creation, updating, and removal from the DOM.

Get PΛWΛN’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Lifecycle methods are particularly important for managing resources, handling side effects, and optimizing rendering performance.

Overview of Component Lifecycle Phases

A component’s lifecycle can be divided into three main phases:

1. Mounting

• When a component is created and added to the DOM.

2. Updating

• When a component’s props or state changes, triggering a re-render.

3. Unmounting

• When a component is removed from the DOM.

Lifecycle Methods in Class Components

Mounting Phase

1. constructor(props)

• Purpose: Initializes state and binds event handlers.

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

2. static getDerivedStateFromProps(props, state)

• Purpose: Updates state based on props before rendering.

static getDerivedStateFromProps(props, state) {
  if (props.initialCount !== state.count) {
    return { count: props.initialCount };
  }
  return null;
}

3. render()

• Purpose: Returns JSX to render the component.

render() {
  return <h1>Count: {this.state.count}</h1>;
}

4. componentDidMount()

• Purpose: Executes code after the component is added to the DOM (e.g., fetch data, set up subscriptions).

componentDidMount() {
  console.log("Component mounted!");
}

Updating Phase

1. static getDerivedStateFromProps(props, state)

• Runs before every render, even on updates.

2. shouldComponentUpdate(nextProps, nextState)

• Purpose: Determines whether the component should re-render.
• Default: Returns true.
• Use Case: Optimize performance by preventing unnecessary renders.

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}

3. render()

• Called during every update.

4. getSnapshotBeforeUpdate(prevProps, prevState)

• Purpose: Captures information (like scroll position) before the DOM is updated.
• Return Value: Passed to componentDidUpdate.

getSnapshotBeforeUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    return { message: "Count updated!" };
  }
  return null;
}

5. componentDidUpdate(prevProps, prevState, snapshot)

• Purpose: Executes code after the component updates.

componentDidUpdate(prevProps, prevState, snapshot) {
  if (snapshot) {
    console.log(snapshot.message);
  }
}

Unmounting Phase

1. componentWillUnmount()

• Purpose: Clean up resources (e.g., cancel subscriptions, remove event listeners).

componentWillUnmount() {
  console.log("Component will unmount!");
}

Lifecycle in Functional Components (Hooks)

Functional components achieve the same lifecycle behavior using React Hooks:

Example with useEffect

import React, { useState, useEffect } from "react";
function Timer() {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(interval); // Cleanup on unmount
  }, []);
  return <h1>Time: {seconds}s</h1>;
}
export default Timer;