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;

📌 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)