React Hooks Cheatsheet
Hooks reference + when to use which. React 18+.
1 credit
State & memo
5 itemsLocal state
const [x, setX] = useState(0)Lazy init
useState(() => expensive())Reducer
const [s, d] = useReducer(reducer, initial)Memoize value
const v = useMemo(() => compute(a), [a])Memoize callback
const fn = useCallback(() => ..., [deps])Side effects
4 itemsRun after render
useEffect(() => { fx(); return () => cleanup(); }, [deps])DOM layout (sync)
useLayoutEffect(...) (blocks paint — use sparingly)Mutable ref
const ref = useRef<HTMLInputElement>(null)Imperative handle
useImperativeHandle(ref, () => ({ focus }))Context & custom
typescript
const ThemeCtx = createContext<"light" | "dark">("light");
export const useTheme = () => useContext(ThemeCtx);
// Custom hook
function useDebounced<T>(value: T, ms = 300): T {
const [v, setV] = useState(value);
useEffect(() => {
const t = setTimeout(() => setV(value), ms);
return () => clearTimeout(t);
}, [value, ms]);
return v;
}Rules
- Only call hooks at the top level — never in conditions or loops.
- Only call from React functions or other hooks.
- Dependency arrays: include everything used inside the hook body. The linter is right.
- Don't put non-reactive logic in effects — prefer event handlers.
Newer / lesser-known
4 itemsuseId
Stable unique id per component instance (SSR-safe)useTransition
Mark expensive state updates as non-urgentuseDeferredValue
Show stale UI while new value rendersuseSyncExternalStore
Subscribe to non-React stores safely