React Cheatsheet

What it does

How to use React Cheatsheet

1. 1
   Find the hook or pattern

   Search by name ('useMemo', 'useActionState') or browse sections for state, effects, context, or performance.

2. 2
   Read the syntax

   Each entry shows the correct TypeScript signature with realistic type parameters.

3. 3
   Check the example

   Entries with subtleties include annotated examples — like avoiding stale closures in useEffect.

4. 4
   Note the caveats

   Blue notes flag common mistakes — like not using the functional form of setState when new state depends on old state.

Frequently Asked Questions

When should I use useMemo vs useCallback?

useMemo memoizes a computed value — use it when a calculation is expensive and its inputs rarely change. useCallback memoizes a function reference — use it when passing callbacks to memoized child components to prevent unnecessary re-renders. Don't add either prematurely; profile first.

What is the difference between useEffect and useLayoutEffect?

useEffect runs asynchronously after the browser paints. useLayoutEffect runs synchronously after DOM mutations but before painting. Use useLayoutEffect only when you need to measure the DOM and useEffect for everything else.

What are React 19 Actions?

Actions let you pass an async function directly as a form's action prop. React manages the pending state, error handling, and optimistic updates for you. Combined with useActionState and useFormStatus, they replace the boilerplate of manual loading/error state in form handlers.

When should I use useReducer instead of useState?

Use useReducer when state has multiple related sub-values that update together, when the next state depends on complex logic applied to the previous state, or when you want the state transitions to be explicit and testable as a pure function.

Related Tools