DEV Community

Hemant Govekar
Hemant Govekar

Posted on

useEffect() in ReactJs

#webdev #programming #javascript #react

The useEffect hook in React is essential for handling side effects in functional components. It allows you to perform operations like fetching data, listening for events, updating the DOM, and cleaning up resources.

🔹 Key Features of useEffect

1️⃣ Runs on every render (by default)

2️⃣ Runs only once on mount (with [] dependency array)

3️⃣ Runs when dependencies change ([dependency])

4️⃣ Cleanup function to avoid memory leaks

🚀 Comprehensive Example Covering All Features 

import { useState, useEffect } from "react";

const UseEffectDemo = () => {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState("Hello");

  // 🟢 1️⃣ Runs on every render (default)
  useEffect(() => {
    console.log("Component re-rendered!");
  });

  // 🔵 2️⃣ Runs only once on mount
  useEffect(() => {
    console.log("Mounted! Fetching data...");
  }, []);

  // 🟠 3️⃣ Runs when `count` changes
  useEffect(() => {
    console.log(`Count changed: ${count}`);
  }, [count]);

  // 🟣 4️⃣ Cleanup function for event listeners or subscriptions
  useEffect(() => {
    console.log("Adding event listener...");
    window.addEventListener("resize", () => console.log("Window resized"));

    return () => {
      console.log("Cleanup: Removing event listener...");
      window.removeEventListener("resize", () => console.log("Window resized"));
    };
  }, []);

  return (
    <div>
      <h2>useEffect Demo</h2>
      <p>Count: {count}</p>
      <p>Message: {message}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setMessage("React is awesome!")}>
        Update Message
      </button>
    </div>
  );
};

export default UseEffectDemo;
Enter fullscreen mode Exit fullscreen mode

📌 Explanation

✅ Runs on Every Render – First useEffect() logs on each render.

✅ Runs Only Once on Mount – Second useEffect() fetches data when the component mounts.

✅ Runs on Dependency Change – Third useEffect() logs updates only when count changes.

✅ Cleanup on Unmount – Last useEffect() adds a listener and removes it when the component unmounts.

🔥 When to Use useEffect?

✅ Fetching data (API calls)

✅ Subscribing to events (resize, scroll)

✅ Managing intervals (setTimeout, setInterval)

✅ Cleaning up resources (event listeners, subscriptions)

Top comments (0)