React Hooks: ComponentDidUpdate Equivalent Explained

In React hooks, the useEffect hook with a dependency array acts as the equivalent of componentDidUpdate. By specifying dependencies, useEffect runs after the component updates when those dependencies change.

Syntax

The useEffect hook runs side effects in functional components. To mimic componentDidUpdate, pass a dependency array with variables to watch. The effect runs after render when any dependency changes.

• useEffect(() => { ... }, [dep1, dep2]): Runs effect after updates to dep1 or dep2.
• useEffect(() => { ... }): Runs after every render (like componentDidUpdate and componentDidMount).
• useEffect(() => { ... }, []): Runs only once after mount (like componentDidMount).

javascript

useEffect(() => {
  // code to run after update
}, [dependency1, dependency2]);

Example

This example shows a counter that logs a message every time the count changes, similar to componentDidUpdate watching count.

javascript

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

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

  useEffect(() => {
    console.log(`Count updated to: ${count}`);
  }, [count]);

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

export default Counter;

Output

Count: 0
// After clicking button:
Count: 1
Count updated to: 1
Count: 2
Count updated to: 2

Common Pitfalls

Common mistakes include:

• Omitting the dependency array, causing the effect to run after every render, which can hurt performance.
• Including wrong or missing dependencies, leading to stale values or missed updates.
• Trying to replicate componentDidUpdate without dependencies, which runs on mount and every update.

Always list all variables used inside useEffect in the dependency array to keep behavior predictable.

javascript

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

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

  // Runs after every render, not just updates to count
  useEffect(() => {
    console.log(`Count is: ${count}`);
  });

  return <button onClick={() => setCount(count + 1)}>Increment</button>;
}

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

  // Runs only when count changes
  useEffect(() => {
    console.log(`Count is: ${count}`);
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>Increment</button>;
}

Quick Reference

Summary tips for using useEffect as componentDidUpdate:

• Use useEffect(() => { ... }, [deps]) to run effect after updates to deps.
• Include all variables used inside the effect in the dependency array.
• Empty array [] runs effect only once after mount (not update).
• No array runs effect after every render (mount + update).

Key Takeaways

Use useEffect with a dependency array to run code after specific updates, like componentDidUpdate.

Always list all variables your effect depends on in the dependency array to avoid bugs.

Omitting the dependency array causes the effect to run after every render, which may hurt performance.

An empty dependency array runs the effect only once after the component mounts.

useEffect replaces lifecycle methods in functional components for side effects.