{"record":{"id":"0bd9d6be066cbd26","repo":"marmelab/react-admin","slug":"cannot-call-an-event-handler-while-rendering-0bd9d6","errorCode":null,"errorMessage":"Cannot call an event handler while rendering.","messagePattern":"Cannot call an event handler while rendering\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-core/src/util/useEvent.ts","lineNumber":18,"sourceCode":"import * as React from 'react';\nimport { useCallback } from 'react';\n\n// allow the hook to work in SSR\nconst useLayoutEffect =\n    typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n\n/**\n * Alternative to useCallback that doesn't update the callback when dependencies change\n *\n * @see https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n * @see https://github.com/facebook/react/issues/14099#issuecomment-440013892\n */\nexport const useEvent = <Args extends unknown[], Return>(\n    fn: (...args: Args) => Return\n): ((...args: Args) => Return) => {\n    const ref = React.useRef<(...args: Args) => Return>(() => {\n        throw new Error('Cannot call an event handler while rendering.');\n    });\n\n    useLayoutEffect(() => {\n        ref.current = fn;\n    });\n\n    return useCallback((...args: Args) => ref.current(...args), []);\n};\n","sourceCodeStart":1,"sourceCodeEnd":27,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-core/src/util/useEvent.ts#L1-L27","documentation":"useEvent implements the React 'stable event handler' pattern: the returned function reads fn from a ref that is only updated in useLayoutEffect. Calling the returned function during render hits the ref's initial thrower because the effect has not yet stored the real callback.","triggerScenarios":"Invoking the function returned by useEvent during the render phase of any component — e.g. calling it directly in JSX evaluation, in a render-body statement, or inside useMemo during first render before the layout effect runs.","commonSituations":"Calling a hook-stabilized handler to compute a value in render, wiring it into a library that calls callbacks synchronously during render, or misunderstanding that the handler is event/effect-time only.","solutions":["Only call the handler from event handlers, effects, timers, or promises — never during render.","For first-render invocation, wrap the call in useEffect.","To derive render-time values, call the underlying fn directly rather than the useEvent wrapper."],"exampleFix":"// before\nconst handler = useEvent(fn);\nconst value = handler(input); // render-time call -> throws\n// after\nconst handler = useEvent(fn);\nReact.useEffect(() => { handler(input); }, [input]);","handlingStrategy":"validation","validationCode":"// Call the useEvent-wrapped handler only from handlers/effects:\nReact.useEffect(() => {\n  const id = setTimeout(handler, 0);\n  return () => clearTimeout(id);\n}, []);","typeGuard":null,"tryCatchPattern":"try {\n  handler(input);\n} catch (e) {\n  if (e instanceof Error && e.message === 'Cannot call an event handler while rendering.') {\n    // reroute the call to an effect or event handler\n  }\n}","preventionTips":["Never call useEvent results during render or in useMemo.","Compute render-time values from the raw function, not the wrapped handler.","Keep side-effectful invocations inside useEffect or event handlers."],"tags":["react","hooks","render-phase","event-handler"],"backgroundTag":"side-effect-during-render","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}