{"record":{"id":"f6fb1de815a84087","repo":"facebook/react","slug":"react-hook-useinsertioneffect-requires-an-effect-c","errorCode":null,"errorMessage":"React Hook useInsertionEffect requires an effect callback. Did you forget to pass a callback to the hook?","messagePattern":"React Hook useInsertionEffect 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":109,"sourceCode":"  if (__DEV__) {\n    if (create == null) {\n      console.warn(\n        'React Hook useEffect 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.useEffect(create, deps);\n}\n\nexport function useInsertionEffect(\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 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      );","sourceCodeStart":91,"sourceCodeEnd":127,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react/src/ReactHooks.js#L91-L127","documentation":"Same missing-callback check for useInsertionEffect (ReactHooks.js:109). Insertion effects run synchronously before layout effects (intended for CSS-in-JS injection), and the dev guard warns the moment the hook is called with null/undefined; the undefined create would otherwise fail at commit time when React invokes it.","triggerScenarios":"useInsertionEffect() with zero args, useInsertionEffect(null, deps), or a conditional callback expression evaluating to undefined - typically in styling libraries or dynamic CSS-in-JS wrappers.","commonSituations":"CSS-in-JS runtime code making the insertion effect optional behind a flag; wrappers that forward an optional argument without defaulting it.","solutions":["Pass the insertion function unconditionally: useInsertionEffect(() => insertStyles(style), [style])","Gate optional work inside the callback rather than omitting the callback","Type the wrapper's parameters so create: () => mixed is required"],"exampleFix":"// before\nuseInsertionEffect(enabled ? inject : undefined, [styles]);\n\n// after\nuseInsertionEffect(() => {\n  if (enabled) inject();\n}, [styles]);","handlingStrategy":"validation","validationCode":"if (__DEV__ && typeof create !== 'function') {\n  throw new TypeError('useInsertionEffect requires a callback');\n}\nuseInsertionEffect(create, deps);","typeGuard":"const isEffectCallback = (x) => typeof x === 'function';","tryCatchPattern":null,"preventionTips":["Default optional insertion-effect arguments to a noop: create ?? (() => {})","Type CSS-in-JS wrapper params so the callback is required","Branch on flags inside the effect body, never on whether the effect exists"],"tags":["hooks","use-insertion-effect","css-in-js","missing-argument","dev-only"],"backgroundTag":"missing-hook-argument","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}