Performance Idioms

Targeted tools to cut wasted work - used after measuring, not as default decoration on every component.

React.memo for Pure Props

Wrap a component so React skips re-rendering when props are shallow-equal to the previous render.

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

useMemo for Expensive Derive

Cache a pure calculation that is actually expensive. Do not wrap trivial expressions.

const ranked = useMemo(
  () => items.toSorted((a, b) => b.score - a.score),
  [items],
);

useCallback for Stable Handlers

Keep function identity stable when passing callbacks to memoized children or dependency arrays that should not thrash.

const onSelect = useCallback((id: string) => {
  setSelectedId(id);
}, []);

List Item Memoization

Memoize row components and pass stable keys plus stable callbacks so only changed rows re-render.

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

Avoid Inline Object Props

Inline style={{}} or options={{}} create new identities every render and defeat memo children.

const style = useMemo(() => ({ maxHeight: 320 }), []);
return <List style={style} />;

Code Split with lazy

Load heavy screens on demand so the initial bundle stays smaller.

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

Suspense Fallback

Wrap lazy components in Suspense to show fallback UI while the chunk loads.

<Suspense fallback={<Spinner />}>
  <Editor />
</Suspense>

startTransition for Non-Urgent

Mark updates that can wait (filtering a big list) so urgent input stays responsive.

function onChange(e: React.ChangeEvent<HTMLInputElement>) {
  const q = e.target.value;
  setInput(q);
  startTransition(() => setFilter(q));
}

useDeferredValue for Laggy Input

Keep showing a deferred version of a value so the controlled input can update immediately while heavy UI lags behind.

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

Keys to Reset State

Remounting with a new key is often cheaper and clearer than manual reset effects for complex forms.

<CheckoutForm key={cartId} cartId={cartId} />

Children to Bail Out

Structure trees so a frequently updating parent does not own expensive static children - pass them as children from above.

function UpdatingClock({ children }: { children: React.ReactNode }) {
  const [t, setT] = useState(() => Date.now());
  // children identity from parent can skip re-render work inside
  return (
    <div>
      <time>{t}</time>
      {children}
    </div>
  );
}

Virtualize Long Lists

Do not mount ten thousand DOM nodes. Use a windowing library when scrollable lists get large.

// Render only visible rows via a virtualizer; map a window, not items.length

Avoid Derived State Sync Effects

Compute during render instead of useEffect that setStates derived values - fewer renders, fewer bugs.

const fullName = `${user.first} ${user.last}`;

Profile Before Memo

memo/useMemo have comparison and memory cost. Use React Profiler or why-did-you-render data before sprinkling them everywhere.

// Measure slow commits first, then memo the actual hot component.

Concurrent Rendering Mindset

Prefer transitions and deferred values over blocking the main thread with huge synchronous renders in event handlers.

startTransition(() => {
  setVisibleRange(computeRange(scrollTop));
});

Related

• Lists Keys and Conditionals - list structure before optimizing rows
• Custom Hooks Patterns - encapsulate debounce and deferred logic
• React 19 APIs - concurrent-friendly form and use() APIs

External Related Links

• react.dev/reference - pure API reference (Hooks, built-in components, directives)
• react.dev - official React docs (Learn + full API reference)
• patterns.dev - React design/component patterns

Stack versions: React 19 · TypeScript (strict) · concurrent features enabled by default NzA2MjAyfDkzb2lnY3xvaS5zZWRpdWdlZG9j