facebook/react · error · Error

440

440

Error message

A function wrapped in useEffectEvent can't be called during rendering.

What it means

experimental_useEffectEvent returns a stable wrapper (mountEvent — first use of the hook). Every call goes through a guard, isInvalidExecutionContextForEventFunction(), which is true whenever the renderer's executionContext includes RenderContext — i.e. React is currently rendering. Calling an event function during render throws, because event functions read latest props/state that are not valid to read mid-render.

Source

Thrown at packages/react-reconciler/src/ReactFiberHooks.js:2757

    const events = componentUpdateQueue.events;
    if (events === null) {
      componentUpdateQueue.events = [payload];
    } else {
      events.push(payload);
    }
  }
}

function mountEvent<Args, Return, F: (...Array<Args>) => Return>(
  callback: F,
): F {
  const hook = mountWorkInProgressHook();
  const ref = {impl: callback};
  hook.memoizedState = ref;
  // $FlowFixMe[incompatible-type]
  return function eventFn() {
    if (isInvalidExecutionContextForEventFunction()) {
      throw new Error(
        "A function wrapped in useEffectEvent can't be called during rendering.",
      );
    }
    return ref.impl.apply(undefined, arguments);
  };
}

function updateEvent<Args, Return, F: (...Array<Args>) => Return>(
  callback: F,
): F {
  const hook = updateWorkInProgressHook();
  const ref = hook.memoizedState;
  useEffectEventImpl({ref, nextImpl: callback});
  // $FlowFixMe[incompatible-type]
  return function eventFn() {
    if (isInvalidExecutionContextForEventFunction()) {
      throw new Error(
        "A function wrapped in useEffectEvent can't be called during rendering.",

View on GitHub (pinned to eafeac097b)

Solutions

Call useEffectEvent functions only from effects, event handlers, or actions — never during render
Pass data instead: compute values during render and pass them as arguments when calling the event later
If the value is pure, extract a plain function used during render and keep the event for side-effectful work
Adopt a naming convention (on*/handle*) so call sites are obviously handler-only

Example fix

// before
const getTitle = experimental_useEffectEvent(() => format(user));
const title = getTitle(); // throws: called during render

// after
const formatTitle = () => format(user);            // pure: call during render
const onOpen = experimental_useEffectEvent((title) => {
  log(title);                                        // side effect: handler only
});

Defensive patterns

Strategy: try-catch

Try / catch

// Render-phase throw: boundary around experimental feature usage
<ErrorBoundary fallback={<StaticRow/>} onError={(e) => telemetry.count('useEffectEvent called during render')}>
  <Row />
</ErrorBoundary>

Prevention

Call useEffectEvent functions only from effects, event handlers, and actions
Never use an event function's return value to compute rendered output
Keep pure computations in plain functions; keep side-effectful reads in the event
Name event functions on*/handle* so accidental render-time calls are obvious in review

When it happens

Trigger: Invoking a function wrapped by experimental_useEffectEvent from the render body, inside JSX prop expressions evaluated during render, or from a helper called synchronously while the component renders — on the first render that creates the hook.

Common situations: Mistaking useEffectEvent for useCallback/useMemo and calling it to compute rendered values; computing labels/defaults from the event during render; refactoring effects into render helpers that still call the event.

Related errors

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/0b3e60066e358753. Report an issue: GitHub.