We moved a checkout form to React 19 form actions and used useFormStatus to disable the submit button while submitting. The button never disabled and customers double-submitted orders. useFormStatus only reads the status of a parent form, and we called it in the component that rendered the form.
Users editing several rows quickly lost some of their changes with no error at all. Our autosave saga used takeLatest, which cancelled the save for row A as soon as row B fired, leaving the UI saying Saved while state rolled back. Per-entity concurrency fixed it.
Field inspectors kept losing form submissions in basements and car parks. We rebuilt the app around a local-first write path: an IndexedDB outbox, an idempotent sync endpoint, version-based conflict detection and a UI that tells the truth about what is synced. Full working code included.
We wrapped each row of a 1,500-item list in React.memo, yet typing in a filter box re-rendered every row. Each render passed a new style object and a new onSelect function, so the shallow prop comparison always failed. How we found it with the Profiler and fixed it with stable references.
After enabling React Compiler we removed our manual useMemo calls, and the order table became slower than before. The compiler had bailed out of that component because it mutated an array during render. How we found which components were compiled, fixed the rule violations and verified the result.
Typing in our search box felt sticky, with INP above 400 ms on mid-range laptops. The React Profiler showed the entire product grid re-rendering on every keystroke because one app-wide context held both slow and fast-changing state. Splitting contexts and a selector store cut that to a handful of renders.
Our React app called https://undefined/v1/... in production while dev worked fine. Vite replaces import.meta.env at build time, and our Docker image set the variable only at runtime. We fixed the build and then moved to runtime config.
Order dates rendered fine locally but threw hydration errors for users in Asia and Europe. The server formatted dates in UTC and en-US, the browser in local time. Here is how we found it and fixed it for good.
Bumping React to 19 made npm install fail with ERESOLVE. The quick --legacy-peer-deps workaround installed, then crashed tooltips in staging. We learned to read the conflict, upgrade the real offender and use overrides only as a short, tested bridge.
Our session timeout banner counted from 0 to 1 and then froze. The interval callback captured the first render's state, so it kept computing 0 + 1 forever. Functional state updates, and a ref-based useInterval hook for callbacks that read props, fixed it for good.
After upgrading to Next.js 15 our dev console filled with sync dynamic API warnings, and one un-awaited auth helper quietly stopped redirecting logged-out users. How we migrated cookies(), headers() and params safely.
Our onboarding page created two draft workspaces per visit in development. StrictMode was blamed and nearly disabled, but the real bug was a non-idempotent POST inside an effect with no cleanup, and it was also happening in production.