What is useEffect hook in react?

In React, you use the useEffect hook to:

• Run code when a component mounts
• Run code when a variable changes
• Do things like:
  • Fetch data from APIs
  • Set up event listeners
  • Update the page title
  • Work with timers

✅ Basic useEffect Example

import { useEffect } from "react";

function Welcome() {
  useEffect(() => {
    console.log("Component loaded (mounted)");
  }, []); // empty array = run only once

  return <h2>Welcome!</h2>;
}

🔍 Explanation

• useEffect(() => {...}, [])
  • Runs the function once, after the first render.
  • This is like componentDidMount in class components.

✅ useEffect with Dependencies

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log("Count changed to:", count);
  }, [count]); // runs whenever `count` changes

  return (
    <div>
      <p>Count is {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

✅ Cleanup with useEffect (Like componentWillUnmount)

useEffect(() => {
  console.log("Component mounted");

  return () => {
    console.log("Component will unmount");
  };
}, []);

This is used to clean up:

• Intervals
• Event listeners
• Subscriptions

✅ Real Example: Timer

import { useState, useEffect } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(interval); // cleanup
  }, []);

  return <h2>Timer: {seconds} sec</h2>;
}

Keep Learning 🙂