Tagged: hooks
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.
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.
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: 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.