React Compiler in Production: Gains and What It Broke
Running the React Compiler on real Next.js sites: what it memoises, the measured effect, the patterns it refused to compile, the one bug it exposed.
Writing
React: what we have had to fix
44 write-ups from production, newest first. Each one is a problem hit on a real project and how it was diagnosed and fixed.
INP in React Apps: Hydration, Third Parties, Measure First
Why React sites fail INP: hydration blocking early taps, wide re-renders, third-party scripts on the main thread. What to measure first and the fixes in order.
A Booking Form With Server Actions, Zod and React Hook Form
A booking request form in Next.js: one Zod schema on client and server, React Hook Form for instant validation, a server action that saves.
Hydration Mismatches With Streaming Suspense: A Diagnosis
What a hydration mismatch means under streaming, six causes on a business site from dates to browser extensions, how to find the element, and the fix for each.
Next.js Forms With Server Actions and useActionState
A contact form built the App Router way: a server action that validates and sends, useActionState for pending and errors, progressive enhancement and spam.
React 19.2 useActionState Pending Stuck After Navigation
React 19.2 useActionState leaves isPending true after a Next.js redirect or router.push? Here is why the state never resets and the pattern that fixes it.
Next.js 16 Link Prefetch Hammering Your RSC Endpoint
Next.js 16 Link prefetch flooding your RSC endpoint on hover? Here is why the new heuristic fires too eagerly and the prefetch={false} fix that holds.
React 19.2 ref as Prop Breaking forwardRef Libraries Fix
React 19.2 ref-as-prop colliding with legacy forwardRef components from your UI library? Here is why the double-ref bug fires and the wrapper that fixes it.
Next.js 16 PPR Build Error: Unsupported Segment Config Fix
Next.js 16 build failing after enabling experimental.ppr with 'unsupported segment config'? Here is why the route errors and the migration that ships.
React 19.1 useActionState Pending Stuck After Redirect
React 19.1 useActionState pending flag stays true after a server action redirect in Next.js 16? Here is the cause and a reliable workaround that resets it.
React Compiler INP Regression in Production: Fix
React Compiler enabled on Next.js 16 and field INP regressed past 200ms? Here is why auto-memoisation pushes work post-commit and the scoped fix that lands.
Next.js 16 useActionState Returning Stale State Fix
Next.js 16 useActionState returning the previous submission state after a navigation back? Here is why the hook caches it and the fix that resets cleanly.
React 19 useActionState Not Resetting Form After Success
React 19 useActionState returns success but the form shows old input values. Here is why the state persists and the form-key pattern that resets it cleanly.
INP Regression After React 19.2 useTransition Migration
INP field data spiking after wrapping filter handlers in useTransition? Here is why React 19.2 transitions can make INP worse and the pattern that fixes it.
Next.js 16 PPR Static Shell Flashing on Dynamic Routes
Next.js 16 PPR shell flashing skeleton before dynamic content paints? Here is why the prerender slot leaks and the Suspense boundary fix that stops it.
Next.js 16.2 useActionState Loses Form State on Navigation
Next.js 16.2 wiping useActionState after a Server Action redirect? Here is why the hook resets across navigation and the pattern that keeps state intact.
Next.js 16 PPR: Static Shell Returning Stale Data on Vercel
Next.js 16 PPR is serving a stale static shell while the dynamic hole renders fresh? Here is why the prerender baked the wrong data and the fix that ships.
Next.js 16 Form Component Redirect After Action Not Firing
Next.js 16 Form component leaves the user on the same URL after a server action redirect? Here is the navigation reason it ignores and the fix that ships.
Next.js 16 unstable_cache Migration Build Errors
Next.js 16 build failing after replacing unstable_cache with 'use cache'? Here is why the closure error fires and the exact migration pattern that compiles.
Next.js cacheComponents Mapbox Crash on Route Reappear: Fix
Next.js cacheComponents can break Mapbox, video players, and other imperative widgets on back navigation. Here is the fix path I trust in production today.
React 19.2 useOptimistic Not Resetting After Server Action
React 19.2 useOptimistic state stuck after a server action returns? Here is the key, transition, and revalidatePath fix that lets the UI reset cleanly.
Next.js 16.2 searchParams Promise TypeError in Components
Next.js 16.2 searchParams returning a Promise and breaking your pagination or filter components? Here is the await pattern that fixes the TypeError fast.
Next.js 16 forbidden() Helper Returning 500 Instead of 403
Next.js 16 forbidden() and unauthorized() helpers returning 500 in production? You need forbidden.tsx and unauthorized.tsx files in the route segment.
Next.js 16 Image remotePatterns Wildcard Not Working
Next.js 16 next/image throwing 400 on subdomain wildcards in remotePatterns? Use the new array syntax and explicit pathnames to unblock builds today.
Next.js 16 dynamicIO Uncached Fetch Build Error Fix
Next.js 16 build failing with uncached IO fetch errors under dynamicIO? Wrap data in use cache, Suspense, or connection() to unblock prerender builds.
Next.js after() Function Not Running in Production Fix
Next.js after() callback fires in dev but never runs in production on Vercel? Fix the cache directive, runtime, and proxy interaction with working code.
React useFormStatus Pending Stuck After Server Action
React 19.2 useFormStatus pending stuck on true after a Server Action returns? Here is why redirect, throw, and nested forms break it, with a real fix.
Next.js 16 Streaming Suspense Hydration Mismatch Fix
Next.js 16 Suspense hydration mismatch after streaming render? Fix the date, async data, and use cache patterns causing client/server divergence.
Next.js Parallel Routes 404 After Production Build Fix
Next.js 16 parallel routes returning 404 only after a production build? Fix default.tsx slots, route group conflicts, and async params with working code.
Next.js 16 cookies().set() Lost After redirect(): Fix
Next.js 16 cookies().set() not persisting after redirect() in a Server Action? Fix the async cookies API, Set-Cookie header drop, and the proxy.ts gotcha.
Next.js Parallel Routes Default Slot 404: Real Fix
Next.js parallel routes throwing a 404 on hard refresh in production? Fix the missing default.tsx slot, layout fallback, and App Router gotcha with code.
Next.js 16 Build useState Null Error: Static Gen Fix
Next.js 16 build failing with Cannot read properties of null reading useState during static generation? Fix the React 19.2 dedupe bug with working code.
Next.js 16 generateStaticParams Not Generating Routes Fix
Next.js 16 generateStaticParams returning data but not building static pages? The four real causes and how to force prerender at build time, with code.
INP Mobile Regression from React Hydration Delay Fix
INP score worse on mobile than desktop after a React deploy? Hydration is blocking the main thread. Fix it with code splitting and Suspense streaming.
Next.js cookies() Async TypeError After Upgrade: Fix
Next.js cookies() throwing TypeError after upgrading to 15 or 16? Fix the async API change in Server Components, Server Actions, and Route Handlers fast.
Next.js 16 proxy.ts Not Running in Production: Fix
Next.js 16 proxy.ts not running in production after migrating from middleware.ts? Fix matcher format, file location, and the runtime config with code.
React SPA Dynamic Meta Tags Fix
React SPA dynamic meta tags still miss crawlers and link previews when they only exist after hydration. Here is the scalable SEO fix I recommend today.
Next.js ViewTransition Not Working in App Router: Fix
Next.js ViewTransition not animating in the App Router? The real fix for flashes, full reloads, broken shared elements, and transitions that never start.
Next.js 16 Proxy.ts Middleware Migration Errors: Fix
Next.js 16 replaces middleware.ts with proxy.ts and breaks redirects, rewrites, and matchers on upgrade. Here is the migration path that actually works.
Next.js Contact Form with Resend and Server Actions
A practical production setup for a Next.js contact form using React Hook Form, Zod, Server Actions, and Resend, including spam protection and error handling.
Next.js 16 Async Params TypeError in Dynamic Routes
Next.js 16 throwing 'params is a Promise' TypeError in dynamic routes after upgrade? Here is the root cause and migration fix with working code.
Next.js 16 Server Actions Invalid Error in Production
Next.js 16 Server Actions throwing 'Invalid Server Action' in production after deploy? Here is the cause and fix with working code for Vercel builds.
Next.js use cache Returning Stale Data After Deploy
Next.js 16 use cache keeps serving old data after a production deploy. Here is why it happens and the exact revalidateTag fix with working code.
Next.js 16 revalidateTag Not Working: Production Fix
Next.js 16 revalidateTag not updating cached data in production? Fix missing cacheTag calls, tag mismatches, and cacheLife expire traps that freeze cache.
We take React work on subcontract and direct.
Fixed price for a defined scope, on live sites, with a rollback path. Agencies and in-house teams welcome.
Hire me for React