⚙️ Using useEffect — Handling Side Effects

useEffect lets you perform side effects in functional components. It handles API calls, timers, subscriptions, and other effects that need to run after render.

🎯 useEffect Basics

useEffect takes a function that runs after render. You can optionally provide a dependency array to control when the effect runs.

The effect runs after every render by default. Adding a dependency array controls when it runs. An empty array means it runs once after initial render.

import { useState, useEffect } from 'react';

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

  // Runs after every render
  useEffect(() => {
    document.title = `Count: ${count}`;
  });

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

💡 Dependency Array

The dependency array controls when effects run. Leave it out for every render, empty array for once, or add specific values to run when they change.

import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [id, setId] = useState(1);

  // Runs only on mount (empty array)
  useEffect(() => {
    console.log('Component mounted');
  }, []);

  // Runs when id changes
  useEffect(() => {
    fetch(`/api/data/${id}`)
      .then(r => r.json())
      .then(setData);
  }, [id]);

  return (
    <div>
      <p>Data: {data}</p>
      <button onClick={() => setId(id + 1)}>Next</button>
    </div>
  );
}

📊 Summary

🔑 Key Takeaways

• ✅ useEffect runs side effects after render

• ✅ Dependency array controls when effect runs

• ✅ Empty array means run once on mount

• ✅ Add values to run when they change

• ✅ Return cleanup function for cleanup

• ✅ Effects run after every render by default

Ready to practice? Challenges