React ComponentDidMount Equivalent Using Hooks Explained

In React hooks, the ComponentDidMount lifecycle method is replaced by using useEffect with an empty dependency array []. This runs the effect only once after the component mounts, mimicking ComponentDidMount behavior.

Syntax

The useEffect hook runs side effects in functional components. To mimic ComponentDidMount, pass an empty array [] as the second argument. This tells React to run the effect only once after the component is first rendered.

• useEffect(() => { ... }, []): Runs once on mount.
• The first argument is a function containing the code to run.
• The empty array means no dependencies trigger re-running.

javascript

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Code here runs once after mount
    console.log('Component mounted');
  }, []);

  return <div>Hello</div>;
}

Output

Component mounted

Example

This example shows a functional component that logs a message once when it mounts, just like componentDidMount in class components.

javascript

import React, { useEffect, useState } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    console.log('Timer component mounted');
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    // Cleanup on unmount
    return () => clearInterval(interval);
  }, []);

  return <div>Seconds passed: {seconds}</div>;
}

export default Timer;

Output

Seconds passed: 0 (then increments every second)

Common Pitfalls

Common mistakes when using useEffect as componentDidMount include:

• Forgetting the empty dependency array [], causing the effect to run on every render.
• Placing dependencies inside the array unintentionally, which triggers multiple runs.
• Not cleaning up side effects like timers or subscriptions, leading to memory leaks.

javascript

import React, { useEffect } from 'react';

function Wrong() {
  useEffect(() => {
    console.log('Runs every render, not just mount');
  }); // Missing [] causes this

  return <div>Wrong example</div>;
}

function Right() {
  useEffect(() => {
    console.log('Runs only once on mount');
  }, []); // Correct usage

  return <div>Right example</div>;
}

Output

Wrong: Logs on every render
Right: Logs once on mount

Quick Reference

Use this cheat sheet to remember how to replace componentDidMount with hooks:

Concept	Hook Usage	Effect
Run once on mount	useEffect(() => { ... }, [])	Runs effect only after first render
Run on update	useEffect(() => { ... })	Runs effect after every render
Run on specific change	useEffect(() => { ... }, [dep])	Runs effect when dep changes
Cleanup on unmount	return () => { ... } inside useEffect	Cleans resources when component unmounts

Key Takeaways

Use useEffect with an empty dependency array [] to run code once on component mount.

Always include [] to avoid running effects on every render unintentionally.

Clean up side effects inside useEffect to prevent memory leaks.

useEffect replaces componentDidMount, componentDidUpdate, and componentWillUnmount depending on usage.

Functional components with hooks provide a simpler, clearer way to handle lifecycle events.