React & Next.js Development

Every component should be a Server Component until it provably needs interactivity. The mental model is inverted from the React-of-2020 era: client interactivity is the thing you justify and budget for, not the thing you assume. This single discipline shift cuts client-side JavaScript bundles by 60–80% on most marketing and content-heavy applications.

Client boundaries (the `"use client"` directive) should sit as low in the tree as possible. A common anti-pattern we see in rescue engagements is the entire app marked client because the original team didn't understand the implications — and the resulting bundle is shipping React's whole component tree to every visitor's browser.

Co-located data fetching (calling APIs inside leaf components with useEffect) is the most reliable performance regression we encounter. The 2026 pattern is to fetch in the route loader or Server Component, and pass data down as props or stream it via Suspense boundaries.

TanStack Query is still the right choice for client-side cache management of mutations, optimistic updates, and any data that needs to be re-fetched in response to user action. Server Components handle the initial render; TanStack Query handles the interactive lifecycle.

Lighthouse runs in CI on every PR, with budgets that fail the build. We typically set LCP < 1.8s on simulated 4G, CLS < 0.05, and JavaScript bundle < 180KB gzipped on the homepage. Without these gates, performance regresses by 5–10% per quarter as features ship — and nobody notices until a user complains.

Use the React Profiler and React Compiler (now stable in React 19+) to find unnecessary re-renders. The Compiler eliminates most manual memoisation overhead; teams that have adopted it report 30–40% less useMemo and useCallback boilerplate.