Which lifecycle methods in class components are replaced by useEffect in functional components?

Question

Which lifecycle methods in class components are replaced by useEffect in functional components?

Answer

useEffect can replace componentDidMount, componentDidUpdate, and componentWillUnmount.

Example:

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    console.log('Mounted or Updated');

    return () => {
      console.log('Cleanup before unmount');
    };
  }, [count]);
}

✅ Empty dependency → runs once on mount.

✅ With dependency → runs on updates.

✅ Return cleanup → runs on unmount.

Real-World Example

• Fetching data on mount
• Listening to scroll events
• Cleaning up timers

Quick Practice

Build a timer component that starts on mount and clears on unmount.

Summary

useEffect combines the behavior of componentDidMount, componentDidUpdate, and componentWillUnmount.