🔥 Introduction to React Hook - useEffect

 📌 What are useEffect?

 useEffect is a React hook used for handling side effects in functional components. Side effects include data fetching, subscriptions, timers, and manually changing the DOM.

---

🔹 Basic Syntax

import { useState, useEffect } from "react";

function Example() {

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

  useEffect(() => {

    console.log("Component rendered or count changed!");

  }, [count]); // Runs when 'count' changes

  return (

    <div>

      <h2>Count: {count}</h2>

      <button onClick={() => setCount(count + 1)}>Increment</button>

    </div>

  );

}

export default Example;

🔹 How useEffect Works

---

useEffect(() => { /* code */ }, [dependencies])

• No Dependencies ([] not included)→ Runs on every render. 
• Empty Dependency Array ([])→ Runs only on mount (like componentDidMount). 
• With Dependencies ([var])→ Runs when the specified variable changes. 
• Cleanup Function→ Used for cleanup before unmounting (like componentWillUnmount).

---

🛠 Example: useEffect with API Fetching

import { useState, useEffect } from "react";

function UsersList() {

  const [users, setUsers] = useState([]);

  useEffect(() => {

    fetch("https://jsonplaceholder.typicode.com/users")

      .then((res) => res.json())

      .then((data) => setUsers(data));

  }, []); // Runs only once when component mounts

  return (

    <ul>

      {users.map((user) => (

        <li key={user.id}>{user.name}</li>

      ))}

    </ul>

  );

}

export default UsersList;

📌 Key Points 

• useEffect fetches data once when the component loads ([] dependency). 
• State updates trigger a re-render.

---

🔥 Example: Cleanup Function (Removing Event Listener)

import { useState, useEffect } from "react";

function WindowWidth() {

  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {

    const handleResize = () => setWidth(window.innerWidth);

    window.addEventListener("resize", handleResize);

    return () => {

      window.removeEventListener("resize", handleResize); // Cleanup

    };

  }, []); // Runs only once on mount

  return <h2>Window Width: {width}px</h2>;

}

export default WindowWidth;

📌 Why Cleanup? 

• Prevents memory leaks when components unmount.

Effect Type	Dependency Array	When It Runs
Every render	❌ No array	Runs on every render
On mount only	[] (empty array)	Runs once (like componentDidMount)
When state/prop changes	[count]	Runs when count updates
Cleanup on unmount	return () => {}	Runs when component unmounts