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

ReactINTERMEDIATEMEDIUM

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 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.

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.

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

What this error means

Typical symptoms

Common causes

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

Advanced notes

Related errors

Official resources & further reading