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

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