How to use the React Hooks Cheat Sheet
- 1. Search or browseType a word like the function or task you need, or pick a section.
- 2. CopyEach snippet has its own Copy button, so you can paste it straight into your editor.
- 3. DownloadSave the whole React Hooks cheat sheet as plain text or Markdown for offline revision.
What's in it
It covers the hooks used in everyday React work, plus the newer ones added in React 18 and 19. The 26 snippets are organised into 14 sections: useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer, useLayoutEffect, useId, useTransition, useDeferredValue, Custom hooks, Rules, React 19.
Example
Search "fetch" to see a useEffect that fetches data and uses a flag in its cleanup to ignore responses that arrive after the component has moved on, preventing a common race-condition bug. Search "previous" for setCount(c => c + 1), the updater form that always builds on the latest state.
Tips for using it
- Learn the dependency array rules line; most useEffect bugs come from it.
- Reach for useMemo and useCallback only when profiling shows a need.
A quick look, one snippet per section
- useState:
const [count, setCount] = useState(0);(state value and setter) - useEffect:
useEffect(() => { document.title = `${count} clicks`; }, [count]);(run after render when count changes) - useRef:
const inputRef = useRef(null); <input ref={inputRef} />(reference a DOM element) - useMemo:
const total = useMemo(() => items.reduce((s, i) => s + i.price, 0), [items]);(cache an expensive calculation) - useCallback:
const onSave = useCallback(() => save(form), [form]);(stable function identity for memoised children) - useContext:
const ThemeCtx = createContext("light");(create a context) - useReducer:
const [state, dispatch] = useReducer(reducer, { count: 0 });(state with actions) - useLayoutEffect:
useLayoutEffect(() => { measure(); }, []);(runs before paint; for measuring layout) - useId:
const id = useId(); <label htmlFor={id}>…</label><input id={id} />(unique IDs for accessibility)
Search the box above for the rest of the React Hooks snippets, or download the full sheet.
Frequently asked questions
Are class components covered?
No. Hooks are for function components.
Which React version?
React 18 and 19; React 19-only hooks are labelled.
Is the React Hooks cheat sheet free?
Yes. You can search, read and copy every snippet in the React Hooks cheat sheet without signing up. The first time you download it, we ask once for your name and WhatsApp number; after that downloads and every other Uncodemy tool open straight away.