React Cheatsheet 2026

The hooks, patterns, and APIs React developers reach for every day — kept current and copy-paste ready. Bookmark it and keep it open in a tab.

Core Hooks

Local component state.

const [count, setCount] = useState(0);
setCount(c => c + 1);

Run side effects after render.

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

Mutable value that survives renders.

const inputRef = useRef(null);
<input ref={inputRef} />

Memoize an expensive computation.

const sorted = useMemo(
  () => items.sort(cmp),
  [items]
);

Stable function identity.

const onClick = useCallback(
  () => doThing(id),
  [id]
);

Read context without a consumer.

const theme = useContext(ThemeContext);

Short-circuit and ternary.

{isLoading && <Spinner />}
{error ? <Err /> : <Data />}

Stable keys avoid re-mounts.

{items.map(i => (
  <Row key={i.id} {...i} />
))}

Share state via the closest parent.

<Parent>
  <Child value={v} onChange={setV} />
</Parent>

Extract reusable logic.

function useToggle(init = false) {
  const [on, set] = useState(init);
  return [on, () => set(o => !o)] as const;
}

Skip re-render if props are equal.

const Row = React.memo(function Row(props) {
  return <li>{props.label}</li>;
});

Code-split a component.

const Chart = lazy(() => import('./Chart'));
<Suspense fallback={<Spinner/>}>
  <Chart />
</Suspense>

New refs break memoization.

// ❌ style={{margin:8}}
// ✅ const s = {margin:8}; style={s}

Describe a component's inputs.

type Props = { label: string; onClick?: () => void };
function Btn({ label, onClick }: Props) {}

Give state an explicit type.

const [user, setUser] = useState<User | null>(null);

Common DOM event types.

(e: React.ChangeEvent<HTMLInputElement>) => {}
(e: React.FormEvent) => {}