useEffect — Side Effects & Lifecycle

import { useState, useEffect } from 'react';

// Mental model: "when X changes, synchronize Y with the outside world"
// NOT: "do this after mount" / "do this before unmount"

// Example: synchronize document.title with document state
function PageTitle({ title }: { title: string }) {
  useEffect(() => {
    document.title = title; // side effect: touching outside React
    return () => {
      document.title = 'My App'; // cleanup: restore when component unmounts
    };
  }, [title]); // dependency: re-sync when title changes

  return <h1>{title}</h1>;
}

// The three dependency array forms:
useEffect(() => { /* runs after EVERY render */ });          // no array
useEffect(() => { /* runs ONCE on mount */ }, []);           // empty array
useEffect(() => { /* runs when a or b changes */ }, [a, b]); // with deps

// When a user types quickly, multiple fetches fire
// The responses can arrive OUT OF ORDER — a stale response overwrites fresh data

// ❌ RACE CONDITION
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(data => setUser(data)); // ← might set STALE data if userId changed
  }, [userId]);
}

// ✅ FIX 1: AbortController — cancel the previous request
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    fetch(`/api/users/${userId}`, { signal: controller.signal })
      .then(r => r.json())
      .then(data => setUser(data))
      .catch(err => {
        if (err.name !== 'AbortError') throw err; // ignore expected abort
      });

    return () => controller.abort(); // cleanup: cancel when userId changes
  }, [userId]);
}

// ✅ FIX 2: ignore flag — for non-abortable async operations
function useUser(userId: string) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let ignore = false;

    fetchUser(userId).then(data => {
      if (!ignore) setUser(data); // only update if still relevant
    });

    return () => { ignore = true; };
  }, [userId]);

  return user;
}

// Every effect that sets up a subscription, timer, or listener
// MUST clean it up to prevent memory leaks and stale callbacks

// ✅ EventListener cleanup
useEffect(() => {
  function handleResize() {
    setSize({ width: window.innerWidth, height: window.innerHeight });
  }
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

// ✅ Timer cleanup
useEffect(() => {
  const id = setInterval(() => {
    setSecond(s => s + 1);
  }, 1000);
  return () => clearInterval(id);
}, []);

// ✅ WebSocket cleanup
useEffect(() => {
  const ws = new WebSocket('wss://api.example.com/live');
  ws.onmessage = (e) => setMessages(prev => [...prev, JSON.parse(e.data)]);
  return () => ws.close();
}, []);

// ✅ Intersection Observer cleanup
useEffect(() => {
  const observer = new IntersectionObserver(([entry]) => {
    setIsVisible(entry.isIntersecting);
  });
  if (ref.current) observer.observe(ref.current);
  return () => observer.disconnect();
}, []);