useEffect.
Sync with the world outside React.

import { useEffect, useState } from 'react';

function DocumentTitle({ count }) {
useEffect(() => {
// Runs AFTER the render is committed to the DOM
document.title = Count: ${count}`;
});

return 
Check the browser tab — it says "{count}"
;
}

// Order of operations:
// 1. React calls DocumentTitle() → returns JSX
// 2. React commits the JSX to the DOM
// 3. React runs the useEffect callback
// 4. document.title updates
//
// The effect never runs during render.
// This is why side effects belong in useEffect,
// not in the component body.

// ─────────────────────────────────────────

// ❌ WRONG — side effect in render
function Broken({ count }) {
document.title = Count:${count}`;
// This works sometimes but is a bug:
// - Fires on every render, including ones React discards
// - Runs during StrictMode double-render in dev
// - Runs on the server during SSR (no document)
// - Makes the render impure
return 
{count}
;
}

// ✅ CORRECT — side effect in useEffect
function Fixed({ count }) {
useEffect(() => {
document.title = Count: ${count}`;
});
return 
{count}
;
}

// 1. NO dependency array — runs after EVERY render
useEffect(() => {
console.log('Ran after render');
});
// Rarely what you want. Usually a bug or oversight.
// Runs: initial render, every state change, every prop change.

// 2. EMPTY array [] — runs ONCE after first render
useEffect(() => {
console.log('Component mounted');
}, []);
// Use for: fetch data once, set up a subscription,
// initialize a third-party library. The effect runs
// after the first render and never again (unless unmounted).

// 3. SPECIFIC dependencies [x, y] — runs when x or y changes
useEffect(() => {
console.log('Count changed to', count);
}, [count]);
// Runs: after first render (initial), and every time
// count changes. If count stays the same across renders,
// the effect doesn't re-run.
//
// React compares dependencies by reference (Object.is).
// Primitives (numbers, strings, booleans) compare by value.
// Objects and arrays compare by reference — a new {} or []
// every render triggers the effect every render.

// ─────────────────────────────────────────

// Example: fetch data when userId changes
function UserProfile({ userId }) {
const [user, setUser] = useState(null);

useEffect(() => {
async function load() {
const res = await fetch(/api/users/${userId}`);
const data = await res.json();
setUser(data);
}
load();
}, [userId]);
// Runs when userId changes. Refetches the user.
// If userId stays the same, no refetch.
// This is the standard "fetch on prop change" pattern.

if (!user) return 
Loading...
;
return 
{user.name}
;
}

function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
// AbortController lets us cancel if the component unmounts
// or if userId changes before the fetch completes
const controller = new AbortController();

async function load() {
setLoading(true);
setError(null);

try {
const res = await fetch(/api/users/${userId}`, {
signal: controller.signal,
});

if (!res.ok) throw new Error(HTTP${res.status}`);

const data = await res.json();
setUser(data);
} catch (err) {
if (err.name === 'AbortError') return; // cancelled — ignore
setError(err.message);
} finally {
setLoading(false);
}
}

load();

// Cleanup — cancel the fetch if the effect re-runs or unmounts
return () => controller.abort();
}, [userId]);

if (loading) return 
Loading...
;
if (error) return 
Error: {error}
;
return 
{user.name}
;
}

// 1. Event listener
useEffect(() => {
function handleResize() {
setWidth(window.innerWidth);
}

window.addEventListener('resize', handleResize);

// Cleanup — remove the same listener
return () => window.removeEventListener('resize', handleResize);
}, []);
// Without cleanup, every re-mount adds another listener.
// Memory leak. The handler fires multiple times per resize.

// ─────────────────────────────────────────

// 2. Timer
useEffect(() => {
const id = setInterval(() => {
setSeconds(s => s + 1);
}, 1000);

return () => clearInterval(id);
}, []);
// Without cleanup, the interval keeps running after unmount.
// Updates state on an unmounted component. React warns.

// ─────────────────────────────────────────

// 3. Subscription (e.g., WebSocket, Firebase)
useEffect(() => {
const unsubscribe = store.subscribe('messages', (msg) => {
setMessages(prev => [...prev, msg]);
});

return unsubscribe;
}, []);
// Unsubscribe on unmount. Without it, the store keeps sending
// messages to a component that no longer exists.

// ─────────────────────────────────────────

// 4. Fetch (see previous section for full example)
useEffect(() => {
const controller = new AbortController();
fetch(url, { signal: controller.signal })
.then(res => res.json())
.then(setData)
.catch(err => {
if (err.name !== 'AbortError') setError(err);
});

return () => controller.abort();
}, [url]);