JavaScript New Added 8 September 2026

React: Cannot update a component while rendering a different component

A setState call from one component ran during another component's render, usually a state update written directly in the body of a function component or in a child's render path. Render must be pure, so React refuses the update rather than producing an inconsistent tree.

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: updates the parent while the child renders
function Child({ onReady }) {
  onReady(true);          // setState during render
  return <div />;
}

// Right: move the effect out of render
useEffect(() => { onReady(true); }, [onReady]);

// Or update in the event that caused it
<button onClick={() => onReady(true)}>Load</button>

// Derived state does not need an update at all
const total = items.length;   // not useState + useEffect

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.