✅ What is useEffect Hook in React?

The useEffect hook in React allows you to perform side effects inside functional components. Side effects are operations that interact with the outside world or React’s lifecycle, such as fetching data from an API, setting up subscriptions, working with timers, or manually updating the DOM.
Before Hooks were introduced, these tasks were handled using class lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount. With useEffect, all of this logic can now be handled in functional components in a clean and unified way.

🚀 Syntax

useEffect(() => {
  // Side-effect logic here

  return () => {
    // Optional cleanup logic
  };
}, [dependencies]);

The function inside useEffect runs after render
The optional return function is used for cleanup
The dependency array controls when the effect runs

🧠 Key Concepts

Effect function: The main logic that runs after the component renders
Dependency array: Decides when the effect should re-run
Cleanup function: Runs before unmounting or before the effect runs again

🔧 Example 1: useEffect Without Dependencies (Runs After Every Render)

import React, { useEffect } from "react";

function ExampleComponent() {
  useEffect(() => {
    console.log("Component rendered!");
  });

  return <h1>Hello World</h1>;
}

Since no dependency array is provided, the effect runs after every render.

🔄 Example 2: Run Once on Mount (Equivalent to componentDidMount)

import React, { useEffect } from "react";

function Example() {
  useEffect(() => {
    console.log("Component mounted!");
  }, []);

  return <h2>Mounted once</h2>;
}

An empty dependency array ([]) ensures the effect runs only once, when the component mounts.

🔁 Example 3: Run When a Dependency Changes

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

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

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

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

The effect runs only when count changes, not on every render.

🧹 Example 4: Cleanup Function (Equivalent to componentWillUnmount)

import React, { useEffect } from "react";

function Timer() {
  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log("Running every second...");
    }, 1000);

    return () => {
      clearInterval(intervalId);
      console.log("Cleanup done");
    };
  }, []);

  return <p>Timer is running</p>;
}

The cleanup function runs when the component unmounts, preventing memory leaks.

✅ Best Practices

Always use the dependency array intentionally
Avoid effects that run on every render unless truly required
Use cleanup functions for timers, subscriptions, and listeners
Split unrelated logic into multiple useEffect hooks

📌 Common Use Cases

Fetching data from APIs
Subscribing and unsubscribing to events
Using setInterval or setTimeout
Listening to browser events like scroll or resize
Syncing state with external systems

📚 useEffect vs useState

useState: Manages component state and triggers re-renders
useEffect: Handles side effects that run after rendering

🧾 Conclusion

The useEffect hook is one of the most essential tools in React for managing side effects in functional components. By understanding dependency arrays and cleanup functions, you can safely replace class lifecycle methods and build efficient, predictable, and modern React applications using hooks alone.

useEffect Hook in React: A Complete Guide