{"record":{"id":"0b3e60066e358753","repo":"facebook/react","slug":"440","errorCode":"440","errorMessage":"A function wrapped in useEffectEvent can't be called during rendering.","messagePattern":"A function wrapped in useEffectEvent can't be called during rendering\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-reconciler/src/ReactFiberHooks.js","lineNumber":2757,"sourceCode":"    const events = componentUpdateQueue.events;\n    if (events === null) {\n      componentUpdateQueue.events = [payload];\n    } else {\n      events.push(payload);\n    }\n  }\n}\n\nfunction mountEvent<Args, Return, F: (...Array<Args>) => Return>(\n  callback: F,\n): F {\n  const hook = mountWorkInProgressHook();\n  const ref = {impl: callback};\n  hook.memoizedState = ref;\n  // $FlowFixMe[incompatible-type]\n  return function eventFn() {\n    if (isInvalidExecutionContextForEventFunction()) {\n      throw new Error(\n        \"A function wrapped in useEffectEvent can't be called during rendering.\",\n      );\n    }\n    return ref.impl.apply(undefined, arguments);\n  };\n}\n\nfunction updateEvent<Args, Return, F: (...Array<Args>) => Return>(\n  callback: F,\n): F {\n  const hook = updateWorkInProgressHook();\n  const ref = hook.memoizedState;\n  useEffectEventImpl({ref, nextImpl: callback});\n  // $FlowFixMe[incompatible-type]\n  return function eventFn() {\n    if (isInvalidExecutionContextForEventFunction()) {\n      throw new Error(\n        \"A function wrapped in useEffectEvent can't be called during rendering.\",","sourceCodeStart":2739,"sourceCodeEnd":2775,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-reconciler/src/ReactFiberHooks.js#L2739-L2775","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","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"],"exampleFix":"// before\nconst getTitle = experimental_useEffectEvent(() => format(user));\nconst title = getTitle(); // throws: called during render\n\n// after\nconst formatTitle = () => format(user);            // pure: call during render\nconst onOpen = experimental_useEffectEvent((title) => {\n  log(title);                                        // side effect: handler only\n});","handlingStrategy":"try-catch","validationCode":null,"typeGuard":null,"tryCatchPattern":"// Render-phase throw: boundary around experimental feature usage\n<ErrorBoundary fallback={<StaticRow/>} onError={(e) => telemetry.count('useEffectEvent called during render')}>\n  <Row />\n</ErrorBoundary>","preventionTips":["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"],"tags":["react","hooks","use-effect-event","experimental","render-phase"],"backgroundTag":"side-effects-during-render","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}