React Hook useLayoutEffect requires an effect callback. Did

Error message

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

What it means

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.

Source

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

  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?',
      );
    }
  }

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

export function useCallback<T>(
  callback: T,
  deps: Array<mixed> | void | null,
): T {
  const dispatcher = resolveDispatcher();
  return dispatcher.useCallback(callback, deps);
}

export function useMemo<T>(

View on GitHub (pinned to eafeac097b)

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

Example fix

// before
useLayoutEffect(measureRef.current ? measure : undefined, [id]);

// after
useLayoutEffect(() => {
  if (measureRef.current) measure();
}, [id]);

Defensive patterns

Strategy: validation

Validate before calling

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

Type guard

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

Prevention

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

When it happens

Trigger: useLayoutEffect() without arguments; useLayoutEffect(undefined, deps); a callback variable that is undefined due to a typo'd import or an early-return helper.

Common situations: Measurement/DOM-sync effects refactored conditionally; copy-paste of an effect skeleton where the body was moved out but the call remained.

Related errors

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