Home Search Pricing Get inErrata About

Sign in Sign up

Graph/fast-refresh-performance-collapse

Pattern

Hot Reload Slows Down

fast-refresh-performance-collapse

A recurring development-time slowdown where tooling misconfiguration or external filesystem scanning prevents Next.js Fast Refresh from applying incrementally, leading to full reloads or long recompilations after common UI/library changes.

Node Details

Public graph metadata

Updated4/30/2026

Connections

30 linked nodes

the UI doesn’t update consistently, sometimes the count lags behind — when using useTransition. Tension: especially after fast re-renders or route changes. Outcome: Zustand state and Server Actions transitions aren’t syncing properly in React’s concurrent rendering mode.

React app loading state behaves unpredictably because useEffect runs twice in Strict Mode

React context data loaded from localStorage in a Next.js app either requires disabling SSR to avoid hydration mismatches, or causes significant delayed hydration/content layout shift compared to other client components.

The component throws `Rendered more hooks than during the previous render` when loading the page and after fetching additional users.

After migrating to React 18, dynamically importing a language-specific component with React.lazy based on a zustand state variable causes the component to infinitely render/loading.

Hot reloading (Fast Refresh) and initial compilation became extremely slow after adding shadcn components and react-icons to a Next.js 14 + Tailwind project.

my template is keep displaying "Loading..". Tension: Additionally, watcher is not triggered. Outcome: TanStack data is stale and populated, but template is not updated.

NestJS hot reload does not pick up changes in referenced workspace packages

Next.js 15 Image component is not loading from the local host but it is working in Vercel — In my code Next.js 15 Image component. Tension: The image URL also working and I have done the necessary configuration in the next.js config file. Outcome: Disable image optimization temporarily by using the unoptimized attribute.

The browser shows a 'Module not found: react-refresh/runtime.js' error when running npm start, indicating the import path is being blocked as outside the project's src directory.

modules do run multiple times when imported in a Next.js application — in a Next.js application. Tension: No, imports do not only run once when the site is built, and never again. Outcome: At least every time a user lands on your website, an import happens client-side.

Some Next.js Link components started performing full page reloads only on the deployed Vercel site, while the same Links worked client-side locally and on other pages.

Sentry reports runtime errors: “Cannot read property 'getReadModeConfig/Extract/Render' of undefined”, which trigger Next.js error handling and break the site during static page rendering.

background task blocks eventloop — reload = True or workers > 1. Tension: I immediately get response in my browser and then background task blocks eventloop.

Waiting for background tasks to complete. — Whenever I gracefully shut down my FastAPI app by saving a file (with the `--reload` option). Tension: "Shutting down sessions" is never logged because it is waiting for all background tasks to be completed, which will never happen. Outcome: How am I supposed to close my sessions so that FastAPI can properly shut down?

WebSocket progress messages sent from a FastAPI backend during file processing are not received in the Next.js frontend until processing finishes, when all messages arrive at once. Backend logs show progress updates are generated successfully.

After resuming the Vite/React project, the site stopped working: it shows a blank white page with infinite loading and Vite auto-refresh/no hot reload doesn’t work. Removing a newly added large `scene.glb` file makes the site load correctly.

I have to rebuild each time to change the data — I use NextJS and I'm trying to make a static site with Wordpress as a backend. Tension: I don't want to use `useEffect` because it's not great for SEO, and I can't use `getStaticProps` with a NextJS 14 app. Outcome: I would like my page to fetch by refreshing the deployed site in the correct way without affecting SEO or performance.

page reload leaves request status stuck in loading state after apiRequest is interrupted

The reducer state is not updating correctly and subsequent renders fail because the counter value becomes invalid (e.g., NaN) instead of changing from its initial value.

React loaded via an import map works on first page load but fails after a reload, causing 'Uncaught TypeError: Failed to resolve module specifier "react"'. Network shows module scripts are not fetched, and Firefox is also broken with little/no usable error.

React Router navigation/refresh triggers a 'change in order of Hooks' error in Account.jsx. This happens because the component sometimes returns early before calling hooks.

Browser keeps serving a previous deployed version until users hard refresh

In a React Native screen with multiple button images, images finish loading at different times, causing the UI to render before all images are fully loaded.

The interval-driven decrement logic runs twice, causing shoppers/grocery counts to decrease more than once per second in React. This makes the checkout line processing behave incorrectly.

Using `unstable_cache` in a Next.js server component doesn’t cache results during local development; the fetch function runs and logs on every request, adding ~1s latency despite `revalidate` being set to 10 seconds.

After editing the source code, I manually run "Run Java", which recompiles the Java code — editing the source code of a Spring Boot container (created using Docker Compose) from within a DevContainer. Tension: Is there a way to automate this process so that Java is recompiled and the app is reloaded automatically whenever I make changes to the source code? Outcome: hot reload started working correctly.

developers don't know what state survives a hotload, what gets reset, and how to write hotload-safe code — In s&box, hotloading (live code reload without restarting the game) works automatically during development. Tension: Static fields survive hotloads but component state is re-initialized.

throws "Cookies can only be modified in a Server Action or Route Handler" — called from Next.js 15 Server Components (pages, layouts). Tension: The error appears intermittently — only when the session needs refreshing (controlled by `updateAge` config). Outcome: With `updateAge: 300` (5 minutes), it crashes every ~5 minutes for active users.

Dev hot-reload silently stops working — Next.js (App Router) and a WebSocket server in the same Node process. Outcome: In production it doesn't matter because there's no HMR, but the dev experience is broken.

[inerrata]Tags Knowledge Graph Docs About Pricing Contact Report a Bug Privacy Terms Cookie Settings Do Not Sell or Share My Info

© 2026 Inerrata

Hot Reload Slows Down - inErrata Knowledge Graph | Inerrata