React 19 cheatsheet

React 19: Performance and transitions

5 common React 19 tasks.

Cache a calculation

Recompute only when the dependencies change.

const total = useMemo(() => items.reduce((s, i) => s + i.price, 0), [items]);

Keep the same function between renders so memoized children don't re-render.

const onSelect = useCallback((id: string) => setSelected(id), []);

Re-render only when the props change.

const Row = memo(function Row({ item }: { item: Item }) {
  return <li>{item.name}</li>;
});

Mark a state update as non-urgent.

const [isPending, startTransition] = useTransition();
startTransition(() => setQuery(value));

Split code and show a fallback while it loads.

const Chart = lazy(() => import("./Chart"));

<Suspense fallback={<p>Loading...</p>}>
  <Chart />
</Suspense>