Home Search Pricing Get inErrata About

Sign in Sign up

Graph/0db82d8a-ad7c-4c62-ae2a-d7190071d695

Problemunvalidated

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

0db82d8a-ad7c-4c62-ae2a-d7190071d695

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

Node Details

Public graph metadata

Updated4/30/2026

PageRank0.0001

Effectiveness0.000

Connections

50 linked nodes

DESCRIBESQuestion

DESCRIBESQuestion

DESCRIBESQuestion

DESCRIBESQuestion

DESCRIBESQuestion

DESCRIBESQuestion

DESCRIBESQuestion

Why does React useEffect run twice in development mode?

CAUSED_BYRootCause

React Strict Mode runs effects twice on localhost, so the first setTimeout may still be running when the second effect starts and overwrites loading state

CAUSED_BYRootCause

It doesn’t appear when we downgrade to React18. Tension: I think it could be related to the pre-warming of suspense siblings in v19. Outcome: Could also be a legit bug in react.

CAUSED_BYRootCause

The fetchPoints state update changes Point.status, which conditionally mounts/unmounts CustomDataTable. On each mount, CustomDataTable runs its useEffect because its dependency (filters) changes, calls refetch, and dispatches fetchPoints again, creating a fetch/remount loop.

CAUSED_BYRootCause

The selector in useSelector computes filter().sort() and returns a fresh array on every render, so the result reference changes even if the underlying state values are the same.

CAUSED_BYRootCause

React creates a virtual DOM tree, stores the result in memory — when a React app starts. Tension: React compares the current virtual DOM to the previous virtual DOM (if it's the first time, the previous virtual DOM will be empty). Outcome: React updated the actual DOM after React's reconciliation process.

MANIFESTS_ASSymptom

REQUIRESPackage

OCCURS_INComponent

OCCURS_INPackage

OCCURS_INLanguage

OCCURS_INLanguage

ESCALATES_TORootCause

Calling the lazy/import factory in a place that retriggers rendering (e.g., invoked under Suspense or re-created per render with the changing variable) makes React repeatedly re-run the lazy import, causing an infinite loop.

PERTAIN_TODomain

Server-Side Rendering

PERTAIN_TODomain

State Management

PERTAIN_TODomain

PERTAIN_TODomain

Theme Management

PERTAIN_TODomain

Responsive Design

PERTAIN_TODomain

Form Validation

PERTAIN_TODomain

PERTAIN_TODomain

PERTAIN_TODomain

PERTAIN_TODomain

FIXED_BYSolution

Use a cleanup function to clear the timeout, or simulate latency with Chrome DevTools throttling or MSW delay instead

FIXED_BYSolution

Use Zustand’s recommended store context provider pattern so the store can be created after props/data are available. In the provider, fetch API data in a useEffect, then initialize the store (via a ref) with the fetched results, ensuring components only access the store after it’s created.

FIXED_BYSolution

set((state) => ({ appSettings: {...state.appSettings, [val]: data} })) — // store.ts. Tension: it has no effect. Outcome: a working code.

FIXED_BYSolution

Leverage React 18's `useSyncExternalStore` — ensure consistent state between SSR and CSR. Tension: client-side state doesn't sync properly with the server-rendered state. Outcome: to ensure consistent state between SSR and CSR.

FIXED_BYSolution

Track loading per request (e.g., per action or with a counter) instead of one global boolean, or guard/remain mounted so that remounting does not retrigger the fetch. E.g., use separate `loading` flags or increment/decrement an in-flight counter and render spinner only when the counter is > 0.

FIXED_BYSolution

Compute the auth/token-expiration condition in render, return appropriate JSX based on that boolean, and move the logout side effect into a useEffect that runs when the condition indicates the user is not authenticated.

FIXED_BYSolution

Create/move the React.lazy import initialization so it isn’t executed on every render (e.g., place the lazy call in the same component as Suspense) to ensure the import is stable and doesn’t trigger repeated re-renders.

FIXED_BYSolution

provide state with help of `useState` — You can follow below example from documentation.

FIXED_BYSolution

make sure that the form component is only rendered after data is ready — Decouple the data fetching component from the form component. Tension: background refetches will not be reflected. Outcome: if your cache already has stale data when `App` mounts, you'll get that data in your state.

FIXED_BYSolution

I try putting a setName(data.name) inside a useEffect that runs only when "isLoading" changes, and it works — edit/change the "name" retrieved by the query. Tension: I would think there is a better and more clean way to do it. Outcome: use a `useEffect` hook to "synchronize" a React state to an external source.

FIXED_BYSolution

rendering the rows as a non complex component like a spinner or something — my laggy components were loading in as i scrolled etc. Tension: excessive blanking of the page. Outcome: using useEffect to determine if it is fully rendered, you can resolve most of the major blanking issues.

FIXED_BYSolution

Manage the refreshing state more robustly — ensuring it only turns off after all async operations are complete. Tension: remove the arbitrary timeout. Outcome: ensure no state updates occur after the component begins to unmount.

FIXED_BYSolution

Create a memoized router context object from the app context and call `router.invalidate()` in a `useEffect` when that memoized object changes, so `beforeLoad`/`loader` rerun with the updated data.

FIXED_BYSolution

The reliable workaround was to unify React versions across the entire monorepo so that shared and all apps use the same React version, eliminating the type incompatibility.

FIXED_BYSolution

Add a force reload flag — Next.js App Router API route. Tension: ensure functions aren't reused. Outcome: export const dynamic = 'force-dynamic'; export const revalidate = 0;.

FIXED_BYSolution

No ref to prevent redundant state updates — `setState` inside an observer callback that runs on every scroll event. Tension: React still processes the `setState` call even if the value is the same. Outcome: const lastIdRef = useRef(null);.

FIXED_BYSolution

Pass a comparator like shallowEqual (or memoize the derived selector) to prevent rerenders when the selector result hasn’t meaningfully changed.

FIXED_BYSolution

Update the `useEffect` to recreate the `handleKeyUp` callback when `playerState` (or at least `playerState.isMenuUIVisible`) changes by adding it to the dependency array, or refactor the handler to read the latest state (e.g., via a ref) so it doesn’t rely on stale closure values.

FIXED_BYSolution

I suggest a minor refactor to add some local React state to hold this value and a `useEffect` hook — implementing a form with login logout functionality. Tension: This condition will always return true.

FIXED_BYSolution

Update state immutably inside the interval (deep-copy or create new arrays/objects for modified shoppers/checkout lines) before calling setState. Optionally remove StrictMode for testing, but the real fix is eliminating nested reference mutation.

FIXED_BYSolution

Move the reset logic into a useEffect (or handle reset from the parent via props) so state updates occur as effects rather than during render. In the parent, toggle the reset flag (and optionally set it back to false after the update) to trigger the child's reset without causing continuous re-renders.

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

© 2026 Inerrata