Performance work is layered. Measure, fix the biggest thing, measure again.

0. Measure first

• React DevTools Profiler — what's re-rendering and how often.
• Lighthouse — Core Web Vitals (LCP, INP, CLS), bundle audit.
• Chrome DevTools Performance — main-thread time, scripting vs rendering.
• Bundle analyzer (Vite/Next plugin) — what's in the bundle.

Without measurement, every optimization is a guess.

1. Ship less JavaScript

• Route-level code splitting: lazy(() => import('./Page')) per route.
• Lazy load heavy components: charts, editors, modals — only when used.
• Prune deps: replace moment with date-fns, lodash with native, etc.
• Preload critical routes: link rel=preload on hover/idle.
• Tree shake: import only what you use.
• Bundle budgets in CI: 200 KB gzipped initial, 100 KB per route.

2. Render less

• Stable keys — item.id, not index.
• React.memo on rows + leaf components inside hot trees.
• useCallback / useMemo for props passed to memoized children.
• Split contexts — separate read-rarely from read-often.
• Move state DOWN — keep state in the smallest subtree that needs it.
• Lift state UP only when siblings need to share.

3. Defer non-urgent work

const [pending, startTransition] = useTransition();

function onSearch(q: string) {
  setQuery(q);
  startTransition(() => {
    setResults(filter(q));
  });
}

4. Virtualize long lists

Over 500 items: react-window / TanStack Virtual. Render only what's visible.

5. Optimize images and fonts

• AVIF/WebP with picture or framework-managed (next/image).
• Lazy-load below-the-fold images (loading=lazy).
• woff2 fonts, font-display swap, subset to needed characters.
• Preload the LCP image.

6. Server state caching

React Query / SWR caches by key, deduplicates concurrent requests, refetches in background. Doing this manually is where 'fast' apps slow down.

7. SSR / SSG / RSC

• Static pages: SSG.
• Dynamic pages: SSR with streaming.
• Mostly-static with bits of interactivity: RSC + Client Components.

8. Other levers

• CDN delivery: edge caching for static + HTML.
• HTTP/2 / HTTP/3: multiplex requests, smaller header overhead.
• CSS strategy: avoid runtime CSS-in-JS for hot paths; prefer Tailwind/CSS Modules.
• Reduce re-layouts: batch DOM reads, avoid forced reflow.
• Web Workers for heavy CPU (parsing, search indexing).

Anti-patterns

• Memoizing everything — bookkeeping costs more than saved renders.
• Optimizing components that render in 0.2ms.
• Pulling in a state library to fix a useEffect bug.
• Caching aggressively without invalidation.

Common 'biggest wins'

1. Route-level code splitting — usually 40–60% bundle reduction.
2. Image optimization — LCP cut in half.
3. Removing a heavy dep (moment, lodash, jquery) — 50–200 KB.
4. Virtualizing the biggest list — frame rate jumps from 20fps to 60fps.
5. React Query — replaces N ad-hoc fetches + caches.

Interview framing

I always measure first — Profiler for render cost, Lighthouse for delivery. Then I fix the biggest thing: usually bundle size, then image optimization, then a hot render path. Memoization is a last resort, not a first move.