{"record":{"id":"5add70f5a0a56dd4","repo":"facebook/react","slug":"react-hook-uselayouteffect-requires-an-effect-call","errorCode":null,"errorMessage":"React Hook useLayoutEffect requires an effect callback. Did you forget to pass a callback to the hook?","messagePattern":"React Hook useLayoutEffect requires an effect callback\\. Did you forget to pass a callback to the hook\\?","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/react/src/ReactHooks.js","lineNumber":125,"sourceCode":"  if (__DEV__) {\n    if (create == null) {\n      console.warn(\n        'React Hook useInsertionEffect requires an effect callback. Did you forget to pass a callback to the hook?',\n      );\n    }\n  }\n\n  const dispatcher = resolveDispatcher();\n  return dispatcher.useInsertionEffect(create, deps);\n}\n\nexport function useLayoutEffect(\n  create: () => (() => void) | void,\n  deps: Array<mixed> | void | null,\n): void {\n  if (__DEV__) {\n    if (create == null) {\n      console.warn(\n        'React Hook useLayoutEffect requires an effect callback. Did you forget to pass a callback to the hook?',\n      );\n    }\n  }\n\n  const dispatcher = resolveDispatcher();\n  return dispatcher.useLayoutEffect(create, deps);\n}\n\nexport function useCallback<T>(\n  callback: T,\n  deps: Array<mixed> | void | null,\n): T {\n  const dispatcher = resolveDispatcher();\n  return dispatcher.useCallback(callback, deps);\n}\n\nexport function useMemo<T>(","sourceCodeStart":107,"sourceCodeEnd":143,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react/src/ReactHooks.js#L107-L143","documentation":"Same missing-callback check for useLayoutEffect (ReactHooks.js:125). Layout effects run synchronously after DOM mutation; calling the hook with a null/undefined create warns in dev at invocation, and the bad value resurfaces as a TypeError in commitHookLayoutEffect when React tries to call it.","triggerScenarios":"useLayoutEffect() without arguments; useLayoutEffect(undefined, deps); a callback variable that is undefined due to a typo'd import or an early-return helper.","commonSituations":"Measurement/DOM-sync effects refactored conditionally; copy-paste of an effect skeleton where the body was moved out but the call remained.","solutions":["Pass the layout function: useLayoutEffect(() => { measure(); }, [target])","Make conditional effects branch inside the callback","Let eslint-plugin-react-hooks and strict types catch missing arguments before runtime"],"exampleFix":"// before\nuseLayoutEffect(measureRef.current ? measure : undefined, [id]);\n\n// after\nuseLayoutEffect(() => {\n  if (measureRef.current) measure();\n}, [id]);","handlingStrategy":"validation","validationCode":"if (__DEV__ && typeof create !== 'function') {\n  throw new TypeError('useLayoutEffect requires a callback');\n}\nuseLayoutEffect(create, deps);","typeGuard":"const isEffectCallback = (x) => typeof x === 'function';","tryCatchPattern":null,"preventionTips":["Pass a named function or inline arrow; never a possibly-undefined variable","Check imports when moving effect bodies between modules (undefined imports are a top cause)","Let the react-hooks ESLint rules run in CI to catch malformed calls"],"tags":["hooks","use-layout-effect","missing-argument","dev-only","common-mistake"],"backgroundTag":"missing-hook-argument","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}