React Hooks Cheat Sheet

const [count, setCount] = useState(0);

# Create local component state.

setCount(prev => prev + 1);

# Update based on previous state safely.

const [items, setItems] = useState(() => loadInitialItems());

# Compute expensive initial state once.

const [state, dispatch] = useReducer(reducer, initialState);

# Manage more structured state transitions.

const [state, dispatch] = useReducer(reducer, initialArg, init);

# Lazily derive reducer state.

const initialForm = { email: '', password: '' };
const [form, setForm] = useState(initialForm);
const resetForm = () => setForm(initialForm);

# Reset state back to initial values.

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

# Run side effects after React commits updates.

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

# Clean up subscriptions or listeners.

useLayoutEffect(() => {
  inputRef.current?.focus();
}, []);

# Run a layout-sensitive effect before the browser paints.

useInsertionEffect(() => {
  injectStyles(ruleText);
}, [ruleText]);

# Insert styles before layout effects.

useEffect(() => {
  let ignore = false;
  fetch(`/api/users/${userId}`)
    .then(r => r.json())
    .then(data => { if (!ignore) setUser(data); });
  return () => { ignore = true; };
}, [userId]);

# Fetch client-side data in an effect with cleanup guard.

const onVisit = useEffectEvent((visitedUrl: string) => {
  logVisit(visitedUrl, cart.length);
});

useEffect(() => {
  onVisit(url);
}, [url]);

# Read latest values in an effect event without re-triggering the effect.

const theme = useContext(ThemeContext);

# Read the nearest context value.

const inputRef = useRef<HTMLInputElement | null>(null);
inputRef.current?.focus();

# Reference a DOM node.

const latestValue = useRef(value);
latestValue.current = value;

# Persist mutable values between renders without re-rendering.

useImperativeHandle(ref, () => ({
  focus: () => inputRef.current?.focus(),
  clear: () => setValue(''),
}), []);

# Expose a controlled imperative API to a parent ref.

const id = useId();
return <><label htmlFor={id}>Email</label><input id={id} /></>;

# Generate stable IDs for labels and ARIA relationships.

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
  useDebugValue(isOnline ? 'Online' : 'Offline');
  return isOnline;
}

# Label a custom hook in React DevTools.

const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);

# Cache an expensive derived computation.

const handleSubmit = useCallback(() => {
  saveForm(form);
}, [form]);

# Memoize a callback passed to children.

const [isPending, startTransition] = useTransition();
startTransition(() => {
  setQuery(nextQuery);
});

# Mark updates as transitions.

const deferredQuery = useDeferredValue(query);
const results = useMemo(() => search(items, deferredQuery), [items, deferredQuery]);

# Defer a value so expensive children lag behind urgent input.

const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);

# Read and subscribe to an external store consistently.

const theme = use(ThemeContext);
const product = use(productPromise);

# Read context or promise values with the `use` API.