Tagged: react
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop
You're calling a state setter directly during render instead of inside an event handler or effect — most often by writing `onClick={setCount(count + 1)}` instead of `onClick={() => setCount(count + 1)}`. React caps the render loop and throws rather than freezing the tab.
Error: Invalid hook call. Hooks can only be called inside the body of a function component
You called a hook (useState, useEffect, etc.) outside a component or custom hook — in a plain function, a class component, or a callback — or your project has two copies of React installed, which makes React think it's a different renderer entirely. Move the hook call to the top level of a function component/custom hook, and dedupe your React install if that's the cause.
Warning: Cannot update a component (X) while rendering a different component (Y)
A parent component's state setter is being called synchronously during a child component's render — usually a callback prop invoked directly in the child's render body instead of from an event handler or effect. Move the state update into a `useEffect` or an actual event handler so it happens after render, not during it.
React Hook "useState" is called conditionally — Rules of Hooks violation
Hooks must be called in the exact same order on every render — never inside an `if`, a loop, or after an early `return`. React tracks hook state by call order, not by name, so a hook that's sometimes skipped desyncs every hook after it. Move the condition inside the hook instead of around it.
Error: A function wrapped in useEffectEvent can't be called during rendering
useEffectEvent lets you read the latest props/state inside an Effect without adding them as dependencies, but the resulting function can only be called from inside an Effect (or another Effect Event) — never directly during render. Move the call into the useEffect body, or into an event handler if that's really what you need.
<Activity> isn't preserving component state when hidden (React 19.2)
State only survives inside `<Activity mode="hidden">` if the hidden subtree stays mounted in the same position in the tree — changing its `key`, conditionally rendering it out entirely instead of toggling `mode`, or nesting it under a component that itself unmounts will all reset it just like a normal unmount would.
Error: cache() was called outside of a request during render (React Server Components)
React's server-side `cache()` memoizes a function's result for the lifetime of a single request — calling it (or reading its cached value) outside that request boundary, such as at module scope or after the request has already finished, throws. Only call the cached function from within components/functions that execute during that request's render.
useOptimistic value reverts before the server action actually resolves
useOptimistic's optimistic value only stays applied while its underlying transition is still pending — if the update function that changes the real state isn't wrapped in the same transition (e.g. a `startTransition` or a form Action), React reverts to actual state as soon as the surrounding render settles, not when the async work finishes.
Error: useFormStatus must be used within a <form> that specifies an action prop
useFormStatus reads pending/data state from the nearest enclosing <form>'s Action — it returns default/empty values (and can throw or warn depending on version) if called outside any form, or inside a form that uses a plain onSubmit handler instead of the `action` prop. Move the component using useFormStatus inside the form, and use `action` instead of `onSubmit`.
React Context value is always the default — Consumer rendered outside its Provider
A component calling useContext (or rendering a Context.Consumer) only sees the value from the nearest matching Provider above it in the tree. If that component is rendered outside any Provider — or under the wrong instance of one, in an app with multiple providers for the same context — it silently falls back to the default value passed to createContext(), with no error thrown.
React Compiler: Cannot compile component — unsupported syntax detected
The React Compiler bails out (safely, at build time) on components using patterns it can't statically verify are safe to auto-memoize — most often mutating a value after it's been read during render, or calling a hook conditionally. Check the compiler's diagnostic for the exact rule violated; components it skips still work, they just don't get auto-memoization.
useEffect runs twice in development — React StrictMode double-invoking effects
In development, StrictMode intentionally mounts, unmounts, and remounts components once to surface Effects that aren't properly cleaned up — it's a diagnostic, not a bug, and it does not happen in production builds. If double-invocation causes visible problems (duplicate API calls, doubled state), the actual bug is a missing or incorrect cleanup function in useEffect.
Warning: A component suspended while responding to synchronous input
A state update from something like typing in an input, or a button click, triggered a component to suspend (e.g. by reading new data via the `use` hook) inside an update React expected to stay synchronous. Wrap the update that leads to suspending in `startTransition` so React can show the previous UI while the new content loads instead of forcing an immediate fallback.
Warning: Function components cannot be given refs — forwardRef migration in React 19
React 19 lets function components accept `ref` as a normal prop, so `forwardRef` is no longer required for new components. This warning means you're on an older React version (or a component still wrapped in `forwardRef` in a way that double-wraps the ref) — either upgrade, or keep using `forwardRef` until you've migrated the whole codebase.
Security advisory: React Server Components RCE (CVE-2025-55182) — am I affected?
CVE-2025-55182 is a critical remote-code-execution vulnerability affecting the react-server-dom-* packages in React 19.0.0 through 19.2.2, exploitable in apps that use React Server Components (default create-next-app setups included). Pure client-side React apps that don't use RSC aren't affected by this specific CVE. Update to the patched releases (19.0.4, 19.1.5, or 19.2.4 and later) immediately if you use RSC.
Warning: Can't perform a React state update on an unmounted component
An async operation (a fetch, a timer) that was started while the component was mounted resolved after the component had already unmounted, and its `.then()`/callback still tries to call a state setter. Cancel the operation in your effect's cleanup function, or guard the setter with a mounted check, so the callback is a no-op after unmount.
useMemo/useCallback recomputes every render even though the dependency "didn't change"
React compares dependency array entries by reference (Object.is), not deep equality. An object, array, or function literal created inline on every render is a new reference every time, even if its contents look identical — so useMemo/useCallback never actually skips recomputation. Memoize the dependency itself, or move the literal outside the component/render path.