tsxANYreacthooksfocususeRef
tsx
const inputRef = useRef<HTMLInputElement | null>(null);
useEffect(() => {
inputRef.current?.focus();
}, []);Simple and common autofocus pattern.
React Hooks Recipes
Practical React Hooks recipes for UI interactions, timers, measurement, polling, and optimistic updates.
Export
Copy the compact sheet, download it, or print it.
Download
`D` dense toggle · `C` copy all
UI Recipes
High-value day-to-day React hook recipes.
tsxANYreacthookstimersuseEffect
tsx
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const id = setInterval(() => setSeconds(s => s + 1), 1000);
return () => clearInterval(id);
}, []);Uses the updater form to avoid stale state issues.
tsxANYreacthooksderived-stateuseEffect
tsx
const [draftName, setDraftName] = useState(name);
useEffect(() => {
setDraftName(name);
}, [name]);Use sparingly; derived state is often avoidable.
tsxANYreacthooksResizeObservermeasurement
tsx
useEffect(() => {
if (!ref.current) return;
const observer = new ResizeObserver(([entry]) => {
setSize(entry.contentRect);
});
observer.observe(ref.current);
return () => observer.disconnect();
}, []);A practical measurement pattern for responsive components.
Network and Server Recipes
Common data loading and request coordination patterns.
tsxANYreacthookspollinguseEffect
tsx
useEffect(() => {
let stopped = false;
async function load() {
const data = await fetch('/api/status').then(r => r.json());
if (!stopped) setStatus(data);
}
load();
const id = setInterval(load, 5000);
return () => {
stopped = true;
clearInterval(id);
};
}, []);Polling needs cleanup and race awareness.
tsxANYreacthooksuseTransitionoptimistic-ui
tsx
const [isPending, startTransition] = useTransition();
function handleAdd(todo: Todo) {
setTodos(prev => [...prev, todo]);
startTransition(async () => {
await saveTodo(todo);
refreshTodos();
});
}Transitions can keep follow-up updates non-blocking while the immediate optimistic UI stays responsive.
More in React Hooks
React Hooks with TypeScript
Type-safe React Hooks patterns for state, refs, reducers, and custom hooks.
React Hooks Pitfalls and Best Practices
Common React Hooks mistakes, stale closure issues, dependency pitfalls, and practical best practices.
React Hooks Patterns
Reusable custom hook patterns for UI state, data fetching, forms, persistence, and interaction handling.
React Hooks Cheat Sheet
Built-in React Hooks reference covering state, effects, refs, context, memoization, transitions, and store subscriptions.