React Hook useInsertionEffect requires an effect callback. D

Error message

React Hook useInsertionEffect requires an effect callback. Did you forget to pass a callback to the hook?

What it means

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.

Source

Thrown at packages/react/src/ReactHooks.js:109

  if (__DEV__) {
    if (create == null) {
      console.warn(
        'React Hook useEffect requires an effect callback. Did you forget to pass a callback to the hook?',
      );
    }
  }

  const dispatcher = resolveDispatcher();
  return dispatcher.useEffect(create, deps);
}

export function useInsertionEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null,
): void {
  if (__DEV__) {
    if (create == null) {
      console.warn(
        'React Hook useInsertionEffect requires an effect callback. Did you forget to pass a callback to the hook?',
      );
    }
  }

  const dispatcher = resolveDispatcher();
  return dispatcher.useInsertionEffect(create, deps);
}

export function useLayoutEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null,
): void {
  if (__DEV__) {
    if (create == null) {
      console.warn(
        'React Hook useLayoutEffect requires an effect callback. Did you forget to pass a callback to the hook?',
      );

View on GitHub (pinned to eafeac097b)

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

Example fix

// before
useInsertionEffect(enabled ? inject : undefined, [styles]);

// after
useInsertionEffect(() => {
  if (enabled) inject();
}, [styles]);

Defensive patterns

Strategy: validation

Validate before calling

if (__DEV__ && typeof create !== 'function') {
  throw new TypeError('useInsertionEffect requires a callback');
}
useInsertionEffect(create, deps);

Type guard

const isEffectCallback = (x) => typeof x === 'function';

Prevention

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

When it happens

Trigger: 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.

Common situations: CSS-in-JS runtime code making the insertion effect optional behind a flag; wrappers that forward an optional argument without defaulting it.

Related errors

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/f6fb1de815a84087. Report an issue: GitHub.