{"record":{"id":"e488ff0c05eff60d","repo":"marmelab/react-admin","slug":"cannot-call-an-event-handler-while-rendering","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/useDebouncedEvent.ts","lineNumber":24,"sourceCode":"// allow the hook to work in SSR\nconst useLayoutEffect =\n    typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n\n/**\n * Hook somewhat equivalent to useEvent, but with a debounce\n * Returns a debounced callback which will not change across re-renders unless the\n * callback or delay changes\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 useDebouncedEvent = <Args extends unknown[], Return>(\n    callback: (...args: Args) => Return,\n    delay: number\n) => {\n    // Create a ref that stores the debounced callback\n    const debouncedCallbackRef = useRef<(...args: Args) => Return | undefined>(\n        () => {\n            throw new Error('Cannot call an event handler while rendering.');\n        }\n    );\n\n    // Keep a stable ref to the callback (in case it's an inline function for instance)\n    const stableCallback = useEvent(callback);\n\n    // Whenever callback or delay changes, we need to update the debounced callback\n    useLayoutEffect(() => {\n        debouncedCallbackRef.current = debounce(stableCallback, delay);\n    }, [stableCallback, delay]);\n\n    // The function returned by useCallback will invoke the debounced callback\n    // Its dependencies array is empty, so it never changes across re-renders\n    return useCallback(\n        (...args: Args) => debouncedCallbackRef.current(...args),\n        []\n    );\n};","sourceCodeStart":6,"sourceCodeEnd":42,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-core/src/util/useDebouncedEvent.ts#L6-L42","documentation":"useDebouncedEvent wraps a callback so it can only be invoked after render, via a ref that is populated in a layout effect. The ref's initial value throws this error, which happens if the debounced handler is invoked during the render phase before React has committed and run the effect.","triggerScenarios":"Calling the debounced function directly during a component's render body or inside another component's render (e.g. debounceFn() at the top level of the component function) instead of inside an event handler, effect, or timeout.","commonSituations":"Developers invoking hooks-returned handlers immediately for 'initial fetch', calling them inside render-time computations, or in class-style lifecycle-like patterns that run during render.","solutions":["Move the call into an event handler, useEffect/useLayoutEffect, or async callback instead of render.","Trigger initial invocations inside useEffect(() => { debouncedFn(); }, []).","If a value is needed during render, compute it directly instead of calling the debounced handler."],"exampleFix":"// before\nconst debounced = useDebouncedEvent(fn, 300);\ndebounced(); // during render -> throws\n// after\nconst debounced = useDebouncedEvent(fn, 300);\nReact.useEffect(() => { debounced(); }, []);","handlingStrategy":"validation","validationCode":"// Never call the debounced handler in render; invoke it in an effect:\nReact.useEffect(() => {\n  debounced(args);\n}, [deps]);","typeGuard":null,"tryCatchPattern":"try {\n  debounced(args);\n} catch (e) {\n  if (e instanceof Error && e.message.includes('while rendering')) {\n    // move invocation to an effect/handler\n  }\n}","preventionTips":["Treat hook-returned handlers as event/effect-time only.","Use useEffect for any initial or reactive invocation.","Enable React strict-mode audits / eslint react-hooks rules to catch render-phase side effects."],"tags":["react","hooks","render-phase","debounce"],"backgroundTag":"side-effect-during-render","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}