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.
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.
Ensure you are passing two arguments to useCallback: the function and the dependency array. The correct syntax is: const memoizedFn = useCallback(fn, dependencies)
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, [])
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 : [])
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 || []
Enable the react-hooks/exhaustive-deps ESLint rule which will warn you about missing or incorrect dependency arrays during development.
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.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite