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

What this error means

The "React Hook useMemo has a missing dependency" warning is triggered by ESLint's react-hooks/exhaustive-deps rule. This rule analyzes your useMemo hooks and compares the variables, props, state, and functions referenced inside the memoization callback against the dependency array you provided. useMemo is designed to cache expensive calculations and prevent unnecessary re-computation. When you use a value inside the useMemo callback that can change over time (like props, state, or functions defined in the component), React needs to know about it through the dependency array. This tells React when to re-run the calculation. If you omit a dependency, the memoized value will continue using the old value from when it first ran, even after the dependency has changed. This leads to stale values being used in your component, which can cause incorrect UI rendering, outdated calculations, and subtle bugs that are hard to debug. The ESLint rule exists to catch these issues before they become runtime problems.

Typical symptoms

• Yellow or orange ESLint warning in your code editor under the useMemo hook
• Memoized value doesn't update when dependencies change
• Component displays stale or outdated calculations
• Performance optimizations not working as expected
• UI doesn't re-render with updated values from useMemo
• Console shows the specific warning message naming which dependencies are missing
• Build warnings during CI/CD pipeline execution with ESLint configured

Common causes

1. Referencing component props inside useMemo without including them in the dependency array
2. Using state variables (from useState) inside the calculation but not listing them as dependencies
3. Calling functions defined in the component scope that reference props or state
4. Accessing object properties or array elements that can change between renders
5. Using values from context (useContext) without including the context value in dependencies
6. Referencing variables from parent component scope that aren't stable across renders
7. Destructuring props or state before useMemo and only including partial dependencies
8. Using derived values or transformations that depend on reactive values

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

function ProductList({ products, sortOrder }) {
  const [filter, setFilter] = useState('');

  const filteredProducts = useMemo(() => {
    // products, sortOrder, and filter are dependencies
    return products
      .filter(p => p.name.includes(filter))
      .sort((a, b) => a[sortOrder] - b[sortOrder]);
  }, [products]); // ❌ Missing sortOrder and filter!
}

function ProductList({ products, sortOrder }) {
  const [filter, setFilter] = useState('');

  const filteredProducts = useMemo(() => {
    return products
      .filter(p => p.name.includes(filter))
      .sort((a, b) => a[sortOrder] - b[sortOrder]);
  }, [products, sortOrder, filter]); // ✅ All dependencies included
}

// Before: mixed stable and reactive calculations
function ProductList({ products, taxRate }) {
  const processedProducts = useMemo(() => {
    const basePrice = 100; // This is constant
    return products.map(p => ({
      ...p,
      price: basePrice * (1 + taxRate)
    }));
  }, [products, taxRate]); // taxRate is needed, basePrice is not

  // After: separate stable calculations
  function ProductList({ products, taxRate }) {
    const basePrice = 100; // Constant outside useMemo

    const processedProducts = useMemo(() => {
      return products.map(p => ({
        ...p,
        price: basePrice * (1 + taxRate)
      }));
    }, [products, taxRate]); // basePrice not needed
  }
}

function ProductList({ products, userId }) {
  // Without useCallback: function recreated every render
  const calculateDiscount = useCallback((price) => {
    return price * (0.9 + (userId % 10) / 100);
  }, [userId]); // calculateDiscount only changes when userId changes

  const discountedProducts = useMemo(() => {
    return products.map(p => ({
      ...p,
      discountedPrice: calculateDiscount(p.price)
    }));
  }, [products, calculateDiscount]); // ✅ Safe dependency
}

function ProductList({ products, options }) {
  // Without stabilization: new options object every render
  const processedProducts = useMemo(() => {
    return products.map(p => processProduct(p, options));
  }, [products, options]); // ❌ options changes every render

  // With stabilization: options memoized
  const stableOptions = useMemo(() => options, [
    options.sortBy,
    options.filterBy,
    options.pageSize
  ]); // Only depend on primitive values

  const processedProducts = useMemo(() => {
    return products.map(p => processProduct(p, stableOptions));
  }, [products, stableOptions]); // ✅ Stable dependency
}

// Before: unnecessary useMemo
function ProductList({ products }) {
  const productCount = useMemo(() => {
    return products.length;
  }, [products]); // Simple calculation, useMemo adds overhead

  // After: direct calculation
  function ProductList({ products }) {
    const productCount = products.length; // Simple enough
  }
}

// Good useMemo: expensive calculation
function Chart({ data, complexConfig }) {
  const processedData = useMemo(() => {
    return expensiveDataTransformation(data, complexConfig);
  }, [data, complexConfig]); // ✅ Worth memoizing
}

# Run ESLint to check for warnings
npm run lint

# Or build the project
npm run build

Advanced notes

const sortedItems = useMemo(() => {
  return items.sort(ALWAYS_THE_SAME_COMPARATOR);
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [items]); // Comparator never changes

Frequently asked questions

What does "React Hook useMemo has a missing dependency: 'sortOrder'. Either inclu" mean?

The "React Hook useMemo has a missing dependency" warning is triggered by ESLint's react-hooks/exhaustive-deps rule. This rule analyzes your useMemo hooks and compares the variables, props, state, and functions referenced inside the memoization callback against the dependency array you provided. useMemo is designed to cache expensive calculations and prevent unnecessary re-computation.

How do I fix "React Hook useMemo has a missing dependency: 'sortOrder'. Either inclu"?

This ESLint warning occurs when your useMemo hook references variables, props, or state that are not included in its dependency array. When dependencies are missing, your memoized value won't recalculate when those values change, leading to stale calculations and performance issues.

What causes "React Hook useMemo has a missing dependency: 'sortOrder'. Either inclu"?

Referencing component props inside useMemo without including them in the dependency array Using state variables (from useState) inside the calculation but not listing them as dependencies Calling functions defined in the component scope that reference props or state

Is the "React Hook useMemo has a missing dependency: 'sortOrder'. Either inclu" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• useMemo must return a value

  How to fix "useMemo must return a value" in React

  MEDIUM

• useMemo received a final argument of type `object` instead of

  How to fix "useMemo received invalid dependencies" in React

  MEDIUM

• useReducer received an invalid initializer

  How to fix "useReducer invalid initializer" in React

  MEDIUM

• Warning: useLayoutEffect should not be used on the server because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI.

  How to fix "useLayoutEffect should not be used on the server" in React

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  React Docs: exhaustive-deps ESLint Rule(Official Docs)
• 📖
  React Docs: useMemo Hook(Official Docs)
• 🐙
  GitHub: useMemo dependency array discussion(GitHub)
• Kent C. Dodds: When to useMemo and useCallback
• Dmitri Pavlutin: A Complete Guide to useMemo()