How to fix useMemo received a final argument of type `object` instead of in React

// ✅ Correct - dependency array with square brackets
const memoizedValue = useMemo(() => expensiveCalculation(a, b), [a, b]);

// ❌ Wrong - object literal with curly braces
const memoizedValue = useMemo(() => expensiveCalculation(a, b), {a, b});

// ❌ Wrong - parentheses instead of brackets
const memoizedValue = useMemo(() => expensiveCalculation(a, b), (a, b));

// ❌ Wrong - missing array wrapper
const memoizedValue = useMemo(() => expensiveCalculation(a, b), a, b);

// ✅ Correct - comma between function and array
const value = useMemo(() => {
  return expensive(data);
}, [data]);

// ❌ Wrong - missing comma
const value = useMemo(() => {
  return expensive(data);
} [data]);

// ❌ Wrong - extra comma creating unexpected behavior
const value = useMemo(() => expensive(data),, [data]);

// ✅ Correct - inline array literal
const result = useMemo(() => compute(x, y), [x, y]);

// ⚠️ Discouraged - variable reference (can't be statically verified)
const deps = [x, y];
const result = useMemo(() => compute(x, y), deps);

// ❌ Wrong - object passed as second argument
const config = { dependencies: [x, y] };
const result = useMemo(() => compute(x, y), config);

function MyComponent({ data, filter }) {
  const [sortOrder, setSortOrder] = useState('asc');

  // ✅ Correct - all reactive values included
  const sortedData = useMemo(() => {
    return data
      .filter(item => item.type === filter)
      .sort((a, b) => sortOrder === 'asc' ? a.value - b.value : b.value - a.value);
  }, [data, filter, sortOrder]);

  // ❌ Wrong - missing dependencies
  const sortedData = useMemo(() => {
    return data.filter(item => item.type === filter).sort(...);
  }, [data]); // Missing: filter, sortOrder
}

function MyComponent({ config }) {
  // ❌ Wrong - new object created on every render
  const result = useMemo(() => {
    return process(config);
  }, [{ setting: config.setting }]); // New object reference each time

  // ✅ Better - depend on primitive values
  const result = useMemo(() => {
    return process(config);
  }, [config.setting, config.option]);

  // ✅ Best - if you must pass whole object, memoize it first
  const memoizedConfig = useMemo(() => ({
    setting: config.setting,
    option: config.option
  }), [config.setting, config.option]);

  const result = useMemo(() => {
    return process(memoizedConfig);
  }, [memoizedConfig]);
}

// ✅ Correct - empty array for one-time calculation
const initialData = useMemo(() => {
  return generateExpensiveData();
}, []);

// ❌ Wrong - omitting the array entirely (runs every render)
const initialData = useMemo(() => {
  return generateExpensiveData();
});

// ⚠️ Note: For truly constant data, consider useState with initializer instead
const [initialData] = useState(() => generateExpensiveData());

import { useMemo } from 'react';

interface Props {
  items: string[];
  multiplier: number;
}

function MyComponent({ items, multiplier }: Props) {
  // ✅ Correct - TypeScript can infer the dependency array type
  const processed = useMemo(() => {
    return items.map(item => item.length * multiplier);
  }, [items, multiplier]);

  // ❌ Wrong - trying to type the dependency parameter
  const processed = useMemo(() => {
    return items.map(item => item.length * multiplier);
  }, [items, multiplier] as [string[], number]); // Unnecessary and can cause issues
}