How to clean up useEffect.
Timers, fetch, subscriptions.

import { useState, useEffect } from 'react';

// ─── BAD: timer keeps running after unmount ──
function BadTimer() {
const [count, setCount] = useState(0);

useEffect(() => {
setInterval(() => {
setCount(c => c + 1); // ⚠️ fires after unmount
}, 1000);
}, []);
// ❌ No cleanup — interval runs forever, warning on unmount

return 
{count}
;
}

// ─── GOOD: setInterval + clearInterval ───────
function GoodTimer() {
const [count, setCount] = useState(0);

useEffect(() => {
const id = setInterval(() => {
setCount(c => c + 1);
}, 1000);

// Cleanup — runs on unmount AND before re-run
return () => clearInterval(id);
}, []); // ✅ cleans up correctly

return 
{count}
;
}

// ─── GOOD: setTimeout + clearTimeout ─────────
function DebouncedSearch({ query }: { query: string }) {
const [results, setResults] = useState<string[]>([]);

useEffect(() => {
const id = setTimeout(() => {
fetch(/api/search?q=${query}`)
.then(r => r.json())
.then(setResults);
}, 300);

// If query changes within 300ms, cancel the previous timeout
return () => clearTimeout(id);
}, [query]);

return 
{results.map(r => 
{r}
)}
;
}

// ─── GOOD: cleanup with dependency change ────
function Countdown({ seconds }: { seconds: number }) {
const [remaining, setRemaining] = useState(seconds);

useEffect(() => {
setRemaining(seconds); // reset when prop changes

const id = setInterval(() => {
setRemaining(r => {
if (r <= 1) {
clearInterval(id);
return 0;
}
return r - 1;
});
}, 1000);

return () => clearInterval(id);
}, [seconds]); // reset timer when seconds changes

return 
{remaining}s remaining
;
}

console.log(BadTimer, GoodTimer, DebouncedSearch, Countdown);

import { useState, useEffect } from 'react';

interface User { id: string; name: string }

// ─── BAD: no cleanup, race condition ─────────
function BadFetch({ userId }: { userId: string }) {
const [user, setUser] = useStatenull>(null);

useEffect(() => {
fetch(/api/users/${userId}`)
.then(r => r.json())
.then(setUser);
}, [userId]);
// ❌ If userId changes fast, old fetch might resolve AFTER new one
// → user shows the wrong data (race condition)
// ❌ If component unmounts, setUser runs on dead component

return 
{user?.name ?? 'Loading...'}
;
}

// ─── GOOD: AbortController + cancelled flag ──
function GoodFetch({ userId }: { userId: string }) {
const [user, setUser] = useStatenull>(null);
const [error, setError] = useState<string | null>(null);

useEffect(() => {
const controller = new AbortController();
let cancelled = false;

setUser(null);
setError(null);

fetch(/api/users/${userId}`, { signal: controller.signal })
.then(r => r.json())
.then(data => {
if (!cancelled) setUser(data);
})
.catch(err => {
// AbortError is expected — ignore it
if (err.name !== 'AbortError' && !cancelled) {
setError(err.message);
}
});

return () => {
cancelled = true;
controller.abort();
};
}, [userId]); // ✅ no race, no setState on unmounted

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

// ─── Pattern: reusable useFetch hook ─────────
function useFetch(url: string) {
const [data, setData] = useStatenull>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);

useEffect(() => {
const controller = new AbortController();
let cancelled = false;

setLoading(true);
setError(null);

fetch(url, { signal: controller.signal })
.then(r => {
if (!r.ok) throw new Error(HTTP ${r.status}`);
return r.json();
})
.then(d => {
if (!cancelled) {
setData(d);
setLoading(false);
}
})
.catch(err => {
if (err.name !== 'AbortError' && !cancelled) {
setError(err.message);
setLoading(false);
}
});

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

return { data, loading, error };
}

// ─── Usage ───────────────────────────────────
function UserProfile({ userId }: { userId: string }) {
const { data, loading, error } = useFetch(/api/users/${userId}`);

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

console.log(BadFetch, GoodFetch, useFetch, UserProfile);

import { useState, useEffect } from 'react';

// ─── Event listener ──────────────────────────
function WindowSize() {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});

useEffect(() => {
function handleResize() {
setSize({
width: window.innerWidth,
height: window.innerHeight
});
}

window.addEventListener('resize', handleResize);

// ✅ Remove the SAME function reference
return () => window.removeEventListener('resize', handleResize);
}, []);

return 
{size.width} × {size.height}
;
}

// ─── WebSocket ───────────────────────────────
function LiveTicker() {
const [price, setPrice] = useState(0);

useEffect(() => {
const ws = new WebSocket('wss://api.example.com/ticks';);

ws.onmessage = (e) => {
const data = JSON.parse(e.data);
setPrice(data.price);
};

// ✅ Close the connection
return () => ws.close();
}, []);

return 
$`{price}
;
}

// ─── Custom event bus ────────────────────────
type Listener = (data: unknown) => void;

class EventBus {
private listeners = new Set();

subscribe(fn: Listener): () => void {
this.listeners.add(fn);
return () => this.listeners.delete(fn);
}

emit(data: unknown) {
this.listeners.forEach(fn => fn(data));
}
}

const bus = new EventBus();

function BusListener() {
const [last, setLast] = useState<unknown>(null);

useEffect(() => {
// ✅ subscribe returns unsubscribe
const unsubscribe = bus.subscribe(setLast);
return unsubscribe;
}, []);

return 
Last event: {JSON.stringify(last)}
;
}

// ─── Interval with dependency ────────────────
function Clock({ timezone }: { timezone: string }) {
const [time, setTime] = useState('');

useEffect(() => {
function tick() {
setTime(new Date().toLocaleTimeString('en-US', { timeZone: timezone }));
}
tick(); // immediate first render
const id = setInterval(tick, 1000);
return () => clearInterval(id);
}, [timezone]);

return 
{time}
;
}

// ─── Intersection Observer ───────────────────
function LazySection() {
const [visible, setVisible] = useState(false);
const ref = useRef(null);

useEffect(() => {
if (!ref.current) return;

const observer = new IntersectionObserver(
([entry]) => setVisible(entry.isIntersecting),
{ threshold: 0.1 }
);

observer.observe(ref.current);

// ✅ Disconnect the observer
return () => observer.disconnect();
}, []);

return 
{visible ? 'Visible' : 'Hidden'}
;
}

import { useRef } from 'react';

console.log(WindowSize, LiveTicker, BusListener, Clock, LazySection);