Reusable custom hook patterns for UI state, data fetching, forms, persistence, and interaction handling.
Reusable hook composition patterns.
function useToggle(initial = false) {
const [value, setValue] = useState(initial);
const toggle = useCallback(() => setValue(v => !v), []);
return [value, toggle] as const;
}Custom hooks let you share logic without changing component hierarchies.
function useInterval({ callback, delay, enabled = true }: {
callback: () => void;
delay: number;
enabled?: boolean;
}) {
useEffect(() => {
if (!enabled) return;
const id = setInterval(callback, delay);
return () => clearInterval(id);
}, [callback, delay, enabled]);
}Options objects make hook signatures easier to extend without positional argument churn.
function useDisclosure(initial = false) {
const [isOpen, setIsOpen] = useState(initial);
return {
isOpen,
open: () => setIsOpen(true),
close: () => setIsOpen(false),
toggle: () => setIsOpen(v => !v),
};
}Objects are easier to read at call sites when hooks return several values or actions.
Practical reusable UI hooks.
function usePrevious<T>(value: T) {
const ref = useRef<T | undefined>(undefined);
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}Useful for comparisons, transitions, analytics, and animation decisions.
function useLocalStorage<T>(key: string, initialValue: T) {
const [value, setValue] = useState<T>(() => {
const raw = localStorage.getItem(key);
return raw ? JSON.parse(raw) as T : initialValue;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue] as const;
}A classic custom hook for persistence; remember browser-only constraints if server rendering is involved.
function useMediaQuery(query: string) {
const [matches, setMatches] = useState(false);
useEffect(() => {
const media = window.matchMedia(query);
setMatches(media.matches);
const onChange = () => setMatches(media.matches);
media.addEventListener('change', onChange);
return () => media.removeEventListener('change', onChange);
}, [query]);
return matches;
}Useful for responsive behavior that components need to know about in JavaScript.
function useOnClickOutside<T extends HTMLElement>(ref: React.RefObject<T>, onOutside: () => void) {
useEffect(() => {
function handle(event: MouseEvent) {
if (!ref.current || ref.current.contains(event.target as Node)) return;
onOutside();
}
document.addEventListener('mousedown', handle);
return () => document.removeEventListener('mousedown', handle);
}, [ref, onOutside]);
}Common for menus, dialogs, tooltips, and dropdowns.
Hooks for loading, caching, and race-safe fetching.
useEffect(() => {
const controller = new AbortController();
fetch(`/api/search?q=${encodeURIComponent(query)}`, { signal: controller.signal })
.then(r => r.json())
.then(setResults)
.catch(err => {
if (err.name !== 'AbortError') throw err;
});
return () => controller.abort();
}, [query]);Aborting requests is cleaner than race flags when the underlying API supports it.
const [data, setData] = useState<User[] | null>(null);
const [error, setError] = useState<Error | null>(null);
const [loading, setLoading] = useState(false);A simple foundation for robust async UIs before introducing a data library.
return {
data,
error,
loading,
isEmpty: !loading && !error && Array.isArray(data) && data.length === 0,
};Derived flags simplify call sites and reduce repeated UI conditionals.
Form and interaction helpers built with hooks.
const [form, setForm] = useState({ email: '', password: '' });
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setForm(prev => ({ ...prev, [name]: value }));
};A standard controlled form pattern for smaller forms.
function formReducer(state: FormState, action: FormAction): FormState {
switch (action.type) {
case 'change':
return { ...state, [action.name]: action.value };
case 'reset':
return action.initial;
default:
return state;
}
}Reducers become easier to scale than ad hoc state updates for complex forms.
function useDebouncedValue<T>(value: T, delay: number) {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const id = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(id);
}, [value, delay]);
return debounced;
}Useful for search, auto-save, analytics, and expensive derived computations.