JavaScript New Added 9 September 2026

React: Rendered more hooks than during the previous render

A hook ran on this render that did not run on the last one, which happens when a hook sits after an early return or inside a condition or a loop. React matches hooks by call order, so the mismatch is reported on the render after the one that actually broke the rule.

Quick fix

Read the commands before running them. Anything that restarts a service, deletes data or changes permissions should be tried on a non-production system first.

Quick fix

// Wrong: the early return skips the effect on some renders
function Profile({ id }) {
  const { data } = useQuery(id);
  if (!data) return <Spinner />;
  useEffect(() => track(data), [data]);
}

// Right: every hook runs every time, the condition moves inside
function Profile({ id }) {
  const { data } = useQuery(id);
  useEffect(() => { if (data) track(data); }, [data]);
  if (!data) return <Spinner />;
}

// A hook called from inside a map or an if is the same bug wearing a hat

# The lint rule catches it before the browser does
npx eslint --rule '{"react-hooks/rules-of-hooks":"error"}' src/

How to diagnose JavaScript errors

JavaScript errors cluster into package management (resolution conflicts, lockfile drift, native build failures), asynchrony (unhandled rejections, race conditions, wrong this), and memory (the V8 heap limit, which is a fixed ceiling rather than a leak indicator on its own). Because JavaScript coerces rather than throws, many bugs surface far from their cause. undefined is not a function usually means a bad import, not a bad call.

If the quick fix above does not resolve it, work through these steps. They apply to this whole class of error, not just to this one message, which is usually what saves the time.

For dependency errors, read what npm actually reports as the conflicting peer requirement. Reaching for --force or --legacy-peer-deps installs a tree you have not validated.
Always attach a rejection handler: process.on('unhandledRejection', …) in Node, and check that every async function called from a non-async context has a .catch().
Raise the V8 heap only after confirming it is a genuine working-set problem: node --max-old-space-size=4096. If usage grows without bound, take a heap snapshot instead.
Use node --inspect with Chrome DevTools to take heap snapshots and compare allocations between two points in time.
For native module build failures (node-gyp), confirm Python and a C++ toolchain are present and that the Node major version matches the module's prebuilt binaries.

Tools worth reaching for

node --inspect
npm ls <pkg>
node --max-old-space-size
clinic.js
why-is-node-running

Authoritative references

Primary documentation for this error, worth reading before applying any fix in production.

react.dev

Related JavaScript errors

See all 42 JavaScript errors →

Browse other categories

Something missing or wrong?

This entry is maintained by hand. If the fix is out of date, incomplete, or you have a better one, email a correction and it will be reviewed.