How to fix useCallback: the dependency array must be an array, not undefined in React

ReactBEGINNERMEDIUMUpdated Dec 10, 2025· 105 views

This error occurs when you call the useCallback hook without providing a dependency array, or when the second argument is undefined. React expects the dependency array to be a proper array (even if empty) to determine when to recreate the memoized function.

Quick fix

Fixes useCallback: the dependency array must be an array, not undefined

  1. Check the useCallback call syntax
  2. Verify the dependency array is always an array
  3. Check for conditional dependency arrays
  4. Validate dependency array variables
  5. Use ESLint to catch the issue
react — error
# useCallback: the dependency array must be an array, not undefined
useCallback: the dependency array must be an array, not undefined

What this error means

The useCallback hook is designed to memoize functions between component re-renders. It requires two arguments: the function to memoize and a dependency array. When you omit the dependency array or pass undefined instead of an array, React cannot properly track dependencies and throws this error to alert you about the incorrect usage.

Typical symptoms

  • React throws a runtime error: "useCallback: the dependency array must be an array, not undefined"
  • The application crashes or fails to render when using useCallback
  • Console shows the error pointing to a component using useCallback
  • The error occurs during development but prevents the component from working

Common causes

  1. Forgetting to pass the second argument to useCallback entirely
  2. Accidentally passing undefined instead of an array (e.g., useCallback(fn, undefined))
  3. Conditional logic that sometimes returns undefined for the dependency array
  4. A typo where the dependency array variable is undefined
  5. Using a variable that hasn't been initialized yet as the dependency array

How to fix "useCallback: the dependency array must be an array, not undefined"

1Check the useCallback call syntax

Ensure you are passing two arguments to useCallback: the function and the dependency array. The correct syntax is: const memoizedFn = useCallback(fn, dependencies)

2Verify the dependency array is always an array

Make sure the second argument is always an array, even if empty. Use an empty array [] when the function doesn't depend on any values: useCallback(fn, [])

3Check for conditional dependency arrays

If you're conditionally setting dependencies, ensure all code paths return an array. Instead of useCallback(fn, someCondition ? deps : undefined), use useCallback(fn, someCondition ? deps : [])

4Validate dependency array variables

If you're using a variable for dependencies, verify it's defined and is an array. Add a default value if necessary: const deps = someDeps || []

5Use ESLint to catch the issue

Enable the react-hooks/exhaustive-deps ESLint rule which will warn you about missing or incorrect dependency arrays during development.

Advanced notes

In React 18 and later, the React Compiler can automatically memoize values and functions, reducing the need for manual useCallback calls. However, when using useCallback explicitly, remember that the dependency array is required. If you want a function that never changes, use an empty dependency array []. If you want it to update when specific values change, include those values in the array. The dependency array should contain all reactive values (props, state, context) that are used inside the function.

Frequently asked questions

What does "useCallback: the dependency array must be an array, not undefined" mean?
The useCallback hook is designed to memoize functions between component re-renders. It requires two arguments: the function to memoize and a dependency array. When you omit the dependency array or pass undefined instead of an array, React cannot properly track dependencies and throws this error to alert you about the incorrect usage.
How do I fix "useCallback: the dependency array must be an array, not undefined"?
This error occurs when you call the useCallback hook without providing a dependency array, or when the second argument is undefined. React expects the dependency array to be a proper array (even if empty) to determine when to recreate the memoized function.
What causes "useCallback: the dependency array must be an array, not undefined"?
Forgetting to pass the second argument to useCallback entirely Accidentally passing undefined instead of an array (e.g., useCallback(fn, undefined)) Conditional logic that sometimes returns undefined for the dependency array
Is the "useCallback: the dependency array must be an array, not undefined" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading