How to fix React Hook useMemo has a missing dependency. Either include it or remove the dependency array in React

ReactINTERMEDIATEMEDIUMUpdated Dec 10, 2025· 149 views

The react-hooks/exhaustive-deps rule warns when values used inside useMemo aren't listed in the dependency array, which causes the memoized result to become stale as props or state change.

Quick fix

Fixes React Hook useMemo has a missing dependency. Either include it or remove the dependency array

const visibleTodos = useMemo(() => {
  return filterTodos(todos, tab);
}, [todos, tab]); // now tab and todos are tracked
  1. Include every referenced value in the dependency array
  2. Memoize inline objects or arrays before they become dependencies
  3. Push helper functions or derived values into their own hooks
  4. Move constants and unchanging values outside the component scope
react — error
const visibleTodos = useMemo(() => {
  return filterTodos(todos, tab);
}, [todos, tab]); // now tab and todos are tracked
React Hook useMemo has a missing dependency. Either include it or remove the dependency array

What this error means

React raises this warning via the react-hooks/exhaustive-deps ESLint rule whenever the callback passed to useMemo references props, state, context, or helper values that are missing from the dependency array. useMemo only recalculates when one of the dependencies changes, so omitting a value causes React to keep returning the previously cached result even after the dependency has updated. In other words, you get a stale memoized value that no longer reflects the current render. The rule enforces complete dependency tracking so every reactive value that influences the calculation is declared, which keeps your memoized values in sync with your component's latest state.

Typical symptoms

  • ESLint or the React compiler complains: "React Hook useMemo has a missing dependency" and mentions the variable name
  • npm run lint or yarn lint fails because the exhaustive-deps warning is treated as an error
  • The memoized value never updates when props or state change, showing stale UI data
  • Memoized child components continue rendering with outdated props because the memoized parent value never changes
  • Development mode (Strict Mode) highlights the warning while production quietly exhibits incorrect behavior
  • The console warns once per render, pointing at the offending useMemo call

Common causes

  1. Referencing props, state, context, or module-scoped variables inside useMemo without adding them to the dependency array
  2. Passing inline objects or arrays to useMemo that get recreated every render, making the dependency identity unstable
  3. Using helper functions from the render scope that close over missing values
  4. Reusing derived values computed outside the memo without tracking them
  5. Intentionally omitting dependencies to avoid recomputation, which leaves the memoized value stale
  6. Relying on mutable refs or external modules without stabilizing their identity or opting them out

How to fix "React Hook useMemo has a missing dependency. Either include it or remove the dependency array"

1Include every referenced value in the dependency array

Check the ESLint warning to identify which variable is missing, then add it to the dependency array. React will rerun the memoized calculation whenever that dependency changes, keeping the result fresh:

tsx
const visibleTodos = useMemo(() => {
  return filterTodos(todos, tab);
}, [todos, tab]); // now tab and todos are tracked
2Memoize inline objects or arrays before they become dependencies

Objects and arrays created directly inside the component body get a new reference on every render, so they defeat dependency tracking. Wrap them in useMemo or move them inside the hook:

tsx
const searchOptions = useMemo(() => ({ matchMode: 'whole-word', query }), [query]);
const visibleItems = useMemo(() => {
  return searchItems(items, searchOptions);
}, [items, searchOptions]);

This keeps searchOptions stable whenever query stays the same.

3Push helper functions or derived values into their own hooks

If useMemo depends on a helper function or derived value that captures props or state, wrap that helper in useMemo/useCallback so it has a stable identity and can be tracked safely:

tsx
const createFormatter = useCallback((locale) => {
  return new Intl.ListFormat(locale, { style: 'long' });
}, []);

const formatted = useMemo(() => {
  const formatter = createFormatter(locale);
  return formatter.format(items);
}, [items, locale, createFormatter]);
4Move constants and unchanging values outside the component scope

If a value never changes, define it at module scope so it does not need to appear in the dependency array:

tsx
const API_ENDPOINT = 'https://api.example.com/batch';

function Dashboard() {
  const response = useMemo(() => fetchData(API_ENDPOINT), []);
  // no missing dependency warning because API_ENDPOINT never changes
}
5Store values you intentionally keep stale in refs

When you deliberately want to reuse the same memoized value even though another value changes, hold that value in a ref and read ref.current inside useMemo. Refs do not belong in dependency arrays:

tsx
const intervalRef = useRef(interval);
useEffect(() => {
  intervalRef.current = interval;
}, [interval]);

const timer = useMemo(() => {
  return createTimer(intervalRef.current);
}, []);

This keeps the timer stable while still reading the latest interval.

6Disable the warning only after documenting the trade-off

Add an eslint-disable-next-line comment only when you have a documented reason for skipping the dependency:

tsx
const loadOnce = useMemo(() => {
  fetchSnapshot(snapshotId);
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // intentionally ignoring snapshotId because it should run once

Warnings exist because missing dependencies usually cause bugs. Only skip them when you fully understand the consequences.

Advanced notes

useMemo is purely an optimization helper, so keep the calculation pure and make sure all dependencies are stable. React still runs the memoized function at least once per render in development (Strict Mode double-invokes it) to detect side effects, so omitting dependencies hides real bugs. The react-hooks/exhaustive-deps rule compares dependencies with Object.is, so any unstable object/array reference needs its own memoization or rearrangement. If you find yourself memoizing functions, useCallback is usually clearer. Debug missing dependencies by logging the dependency array and comparing values with Object.is between renders. Keeping the dependency array honest avoids stale memoized results and keeps memoized child components rerendering when their inputs actually change.

Frequently asked questions

What does "React Hook useMemo has a missing dependency. Either include it or remo" mean?
React raises this warning via the react-hooks/exhaustive-deps ESLint rule whenever the callback passed to useMemo references props, state, context, or helper values that are missing from the dependency array. useMemo only recalculates when one of the dependencies changes, so omitting a value causes React to keep returning the previously cached result even after the dependency has updated. In other words, you get a stale memoized value that no longer reflects the current render.
How do I fix "React Hook useMemo has a missing dependency. Either include it or remo"?
The react-hooks/exhaustive-deps rule warns when values used inside useMemo aren't listed in the dependency array, which causes the memoized result to become stale as props or state change.
What causes "React Hook useMemo has a missing dependency. Either include it or remo"?
Referencing props, state, context, or module-scoped variables inside useMemo without adding them to the dependency array Passing inline objects or arrays to useMemo that get recreated every render, making the dependency identity unstable Using helper functions from the render scope that close over missing values
Is the "React Hook useMemo has a missing dependency. Either include it or remo" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading