How useEffect explains lifecycle methods in a functional component

For so long, I have been trying to understand the lifecycle methods. I am glad I can pen this down for you to understand in the most simple way.

What is useEffect?

useEffect is a React Hook that allows your component to synchronize with external systems — like APIs, DOM events, or timers.

In simple terms, it lets you run side effects in your functional components.

1. Runs on Every Render

useEffect(() => {
  // This runs after every render
  console.log("Component rendered");
// this only renders after a component runs/holds
}).
This runs on every render, as you click.

If you don’t pass any dependencies (no second argument), this effect runs after every re-render.
For example, clicking a button that changes state will trigger this effect again.

2 ComponentDidMount
This only runs when a component mounts.

useEffect(() => {
  console.log("Component mounted");
},[]).
This is a dependency array with no thing inside but runs only once. 
(That is on the first mount)

Here, we’ve added an empty dependency array ([]).
That means the effect runs only once, when the component first mounts; this is similar to componentDidMount in class components.

3 ComponentDidUpdate
This only runs having dependencies to rely on. When the particular component mounts, then the function runs when the dependencies change.

useEffect( () => {
  console.log("User data updated");
},[user]).This runs when the props,pieces of state in the dependency changes.

This version runs only when specific dependencies change.
Whenever the variable inside the dependency array (e.g., user) updates, the effect re-runs.
That’s exactly how componentDidUpdate it works in class components.

4 ComponentWillUnmount
This runs after a component unmounts, and it cleans up.

useEffect(() => {
  return () => {
    console.log("Component unmounted — cleanup complete");
  };
},[]) //it returns a function from the use effect that is a clean up function(disconnect it - 
that is it quickly unmounts so it can rerender another one in its place.)

When your component unmounts, React runs the cleanup function you return inside useEffect.
This is useful for things like clearing timers, disconnecting from APIs, or removing event listeners.

It’s React’s way of saying:

“Hey, before I remove this component or replace it with a new one, let’s clean up any leftover effects (like event listeners, timers, or subscriptions).”

It’s the equivalent of componentWillUnmount In-class components. It ensures your app doesn’t hold on to old data or event subscriptions.

Summary:

Thank you for reading — I hope you found this helpful and gained a clearer understanding of how useEffect connects to React’s lifecycle methods.

Cheers🎉✨