{"record":{"id":"0477ac4df2a65cf2","repo":"facebook/react","slug":"a-function-wrapped-in-useeffectevent-can-t-be-call","errorCode":null,"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-server/src/ReactFizzHooks.js","lineNumber":610,"sourceCode":"      }\n      lastRenderPhaseUpdate.next = update;\n    }\n  } else {\n    // This means an update has happened after the function component has\n    // returned. On the server this is a no-op. In React Fiber, the update\n    // would be scheduled for a future render.\n  }\n}\n\nexport function useCallback<T>(\n  callback: T,\n  deps: Array<mixed> | void | null,\n): T {\n  return useMemo(() => callback, deps);\n}\n\nfunction throwOnUseEffectEventCall() {\n  throw new Error(\n    \"A function wrapped in useEffectEvent can't be called during rendering.\",\n  );\n}\n\nexport function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(\n  callback: F,\n): F {\n  // $FlowFixMe[incompatible-type]\n  return throwOnUseEffectEventCall;\n}\n\nfunction useSyncExternalStore<T>(\n  subscribe: (() => void) => () => void,\n  getSnapshot: () => T,\n  getServerSnapshot?: () => T,\n): T {\n  if (getServerSnapshot === undefined) {\n    throw new Error(","sourceCodeStart":592,"sourceCodeEnd":628,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server/src/ReactFizzHooks.js#L592-L628","documentation":"In the server renderer, useEffectEvent returns a stub (throwOnUseEffectEventCall) that throws whenever it is called: event functions may only run from inside effects and event handlers, and neither executes during SSR. Calling the wrapped function while rendering — even to compute output inside useMemo or a reducer — always throws here.","triggerScenarios":"const onPick = useEffectEvent(fn); const label = onPick(id) in a component body during server render; passing the event function to code that invokes it eagerly; experimental-channel React where useEffectEvent exists, used in an SSR'd component.","commonSituations":"Experimental React (canary/experimental channel) used with SSR; refactors moving logic from an effect or handler into the render path; libraries built against canary APIs rendered on the server.","solutions":["Call useEffectEvent functions only from effects and event handlers — never during render or inside useMemo/reducers","If render needs the computed value, call the underlying logic directly instead of the wrapped event function","Stay on a stable React channel unless the experiment is required"],"exampleFix":"// before\nconst onPick = useEffectEvent(id => save(id));\nconst result = onPick(item.id); // called during render -> throws\n\n// after\nconst onPick = useEffectEvent(id => save(id));\nreturn <button onClick={() => onPick(item.id)}>Save</button>;","handlingStrategy":"validation","validationCode":null,"typeGuard":null,"tryCatchPattern":"try {\n  value = eventFn(arg);\n} catch (e) {\n  if (String(e.message).includes(\"useEffectEvent can't be called during rendering\")) {\n    value = computeDirectly(arg); // call the underlying logic during render instead\n  } else {\n    throw e;\n  }\n}","preventionTips":["Only invoke useEffectEvent functions from effects and event handlers, never during render","Keep render-time computations separate from event functions","Pin stable React channels in production; treat useEffectEvent as experimental"],"tags":["hooks","useeffectevent","experimental","ssr","fizz"],"backgroundTag":"useeffect-event-during-render","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}