How to write a custom hook.
The rules and three full examples.

import { useState } from 'react';

// ─── The custom hook ─────────────────────────
interface UseCounterReturn {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
set: (value: number) => void;
}

function useCounter(initial: number = 0): UseCounterReturn {
const [count, setCount] = useState(initial);

return {
count,
increment: () => setCount(c => c + 1),
decrement: () => setCount(c => c - 1),
reset: () => setCount(initial),
set: (value: number) => setCount(value)
};
}

// ─── Usage ───────────────────────────────────
function CounterA() {
const { count, increment, decrement, reset } = useCounter(0);

return (

Counter A: {count}
+1
-1
Reset

);
}

// ─── Independent state ───────────────────────
function TwoCounters() {
// Each call gets its OWN state — not shared
const a = useCounter(0);
const b = useCounter(100);

return (

A: {a.count} / B: {b.count}
A +1
B +1

);
}

// ─── Custom hook vs regular function ─────────
//
// Custom hook (useCounter):
// - Can call useState, useEffect, other hooks
// - Name MUST start with 'use'
// - Only callable inside components or other hooks
//
// Regular function (increment):
// - Cannot call hooks
// - Any name
// - Callable anywhere
//
// Rule: if it uses hooks, it's a hook. Add 'use'.

console.log(useCounter, CounterA, TwoCounters);

import { useState, useEffect } from 'react';

// ─── The custom hook ─────────────────────────
function useLocalStorage(
key: string,
initial: T
): [T, (value: T | ((prev: T) => T)) => void] {
// Lazy init — reads localStorage once
const [value, setValue] = useState(() => {
try {
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initial;
} catch {
return initial;
}
});

// Persist on change
useEffect(() => {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch {
console.warn(Failed to save ${key}`);
}
}, [key, value]);

return [value, setValue];
}

// ─── Usage: theme preference ─────────────────
function ThemeToggle() {
const [theme, setTheme] = useLocalStorage<'light' | 'dark'>('theme', 'light');

return (

Current theme: {theme}
 setTheme(t => t === 'light' ? 'dark' : 'light')}>
Toggle


);
}

// ─── Usage: user preferences ─────────────────
interface Preferences {
fontSize: number;
notifications: boolean;
}

function Settings() {
const [prefs, setPrefs] = useLocalStorage('prefs', {
fontSize: 16,
notifications: true
});

return (

Font size: {prefs.fontSize}
 setPrefs(p => ({ ...p, fontSize: p.fontSize + 2 }))}>
Larger


);
}

// ─── Key points ──────────────────────────────
//
// 1. Generic  — works for any type
// 2. Lazy initial state — reads once, not every render
// 3. Effect syncs to localStorage on change
// 4. Error handling — localStorage might throw (quota, private mode)
// 5. Same interface as useState — setter accepts value or function
//
// This is the pattern: hide complexity, expose a simple API.

console.log(useLocalStorage, ThemeToggle, Settings);

import { useState, useEffect } from 'react';

// ─── useDebounce ─────────────────────────────
function useDebounce(value: T, delay: number = 300): T {
const [debounced, setDebounced] = useState(value);

useEffect(() => {
const id = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(id);
}, [value, delay]);

return debounced;
}

// Usage: type-ahead search
function SearchBox() {
const [query, setQuery] = useState('');
const debounced = useDebounce(query, 500);

useEffect(() => {
if (debounced) {
fetch(/api/search?q=${debounced}`);
}
}, [debounced]); // only fires after 500ms of quiet

return  setQuery(e.target.value)} />;
}

// ─── useFetch ────────────────────────────────
interface UseFetchResult {
data: T | null;
loading: boolean;
error: string | null;
}

function useFetch(url: string): UseFetchResult {
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: display a user
interface User { id: string; name: string }

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

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

// ─── Composition — hooks calling hooks ───────
function useDebouncedFetch(query: string, delay = 300): UseFetchResult {
const debounced = useDebounce(query, delay);
const url = debounced ? /api/search?q=${debounced}` : '';
return useFetch(url);
}

// ─── Hooks compose ────────────────────────────
//
// useDebouncedFetch uses:
// - useDebounce (which uses useState + useEffect)
// - useFetch (which uses useState + useState + useState + useEffect)
//
// That's 6 built-in hooks under one custom hook.
// Each call to useDebouncedFetch gets its own 6 state slots.
// No conflict, no leakage. That's the power of hooks.

console.log(useDebounce, SearchBox, useFetch, UserProfile, useDebouncedFetch);