How to fix React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps in React

ReactINTERMEDIATEMEDIUM

ESLint warning from the exhaustive-deps rule indicating that a variable, prop, or state value referenced inside useCallback is not included in its dependency array. This can lead to stale closures and bugs where the callback uses outdated values.

What this error means

This ESLint warning comes from the `react-hooks/exhaustive-deps` rule, which is part of the official `eslint-plugin-react-hooks` package maintained by the React team. The rule analyzes your `useCallback` hook and verifies that every value referenced inside the callback function is also listed in the dependency array. When you use `useCallback`, React memoizes the function and only creates a new function instance when one of the dependencies changes. If you reference a variable, prop, or state value inside the callback but don't include it in the dependency array, the callback will continue using the value from when it was first created—not the current value. This creates a "stale closure" where your callback operates on outdated data. The exhaustive-deps rule exists to prevent subtle bugs that are difficult to debug. While it's tempting to disable the warning, doing so often leads to race conditions, incorrect behavior, and unpredictable component state.

How to fix "React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps"

1Add the missing dependency to the dependency array

The most straightforward fix is to include the missing dependency in the array:

jsx

// Before (causes warning)
const handleClick = useCallback(() => {
  console.log(count); // count is used but not in deps
}, []);

// After (warning fixed)
const handleClick = useCallback(() => {
  console.log(count);
}, [count]); // count added to dependency array

This ensures the callback always has access to the current value of count. The callback will be recreated whenever count changes.

2Memoize function dependencies with useCallback

If you're referencing another function inside useCallback, wrap that function in its own useCallback to maintain a stable reference:

jsx

// Before (causes warning)
const fetchData = () => {
  api.getData(userId);
};

const handleRefresh = useCallback(() => {
  fetchData(); // fetchData recreated every render
}, []);

// After (warning fixed)
const fetchData = useCallback(() => {
  api.getData(userId);
}, [userId]);

const handleRefresh = useCallback(() => {
  fetchData(); // stable reference
}, [fetchData]);

This creates a chain of properly memoized functions where each declares its dependencies correctly.

3Memoize object or array dependencies with useMemo

If your callback depends on an object or array, memoize it with useMemo to prevent unnecessary recreations:

jsx

// Before (causes warning)
const config = { userId, apiKey };

const handleSubmit = useCallback(() => {
  api.send(config); // config is a new object every render
}, []);

// After (warning fixed)
const config = useMemo(() => ({
  userId,
  apiKey
}), [userId, apiKey]);

const handleSubmit = useCallback(() => {
  api.send(config);
}, [config]);

Without useMemo, the object is recreated on every render, causing useCallback to see it as a "changed" dependency.

4Use functional updates for state dependencies

When your callback only needs to update state based on the previous value, use the functional update form to avoid depending on the state variable:

jsx

// Before (requires count in deps)
const increment = useCallback(() => {
  setCount(count + 1);
}, [count]);

// After (no dependency needed)
const increment = useCallback(() => {
  setCount(prevCount => prevCount + 1);
}, []);

This pattern is especially useful for callbacks that should have a stable reference but need to update state.

5Use useRef for values that should not trigger recreations

If you need to access the latest value of something without causing the callback to be recreated, store it in a ref:

jsx

const countRef = useRef(count);

useEffect(() => {
  countRef.current = count; // Always keep ref updated
}, [count]);

const handleClick = useCallback(() => {
  console.log(countRef.current); // Access latest value
}, []); // Empty deps - callback never recreated

This is useful when you want a stable callback reference but need access to current values. Use this pattern sparingly and only when you understand the tradeoffs.

6Explicitly disable the rule only when necessary

In rare cases where you intentionally want to capture the initial value and ignore updates, disable the rule with a comment explaining why:

jsx

const handleMount = useCallback(() => {
  // We intentionally only want the initial userId value
  // eslint-disable-next-line react-hooks/exhaustive-deps
  console.log(userId);
}, []);

Always add a comment explaining why the rule is disabled. This helps future maintainers understand the intentional deviation. In most cases, one of the solutions above is preferable.

How to fix React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps in React

What this error means

Typical symptoms

Common causes

How to fix "React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps"

Advanced notes

Related errors

Official resources & further reading