Почему передача нового объекта в массив зависимостей useMemo при каждом рендере не даёт эффекта мемоизации?

Как работает useMemo

Хук useMemo в React принимает функцию-фабрику и массив зависимостей. Он запоминает результат вызова функции и возвращает его при повторных рендерах, пока зависимости не изменятся. Сравнение зависимостей происходит с помощью Object.is, что означает строгое сравнение по ссылке для объектов и массивов.

Проблема с новыми объектами

Если вы передаёте в массив зависимостей объект, созданный прямо в теле компонента, то при каждом рендере создаётся новый объект с новой ссылкой. Например:

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const options = { threshold: 0.5 };
  const memoizedValue = useMemo(() => computeExpensiveValue(options), [options]);
  // ...
};

Здесь options создаётся заново при каждом рендере, поэтому useMemo видит новую ссылку и пересчитывает значение, игнорируя мемоизацию.

Правильное решение

Чтобы мемоизация работала, нужно стабилизировать ссылку на объект. Это можно сделать с помощью useMemo или вынести объект за пределы компонента:

const OPTIONS = { threshold: 0.5 };
const MyComponent = () => {
  const [count, setCount] = useState(0);
  const memoizedValue = useMemo(() => computeExpensiveValue(OPTIONS), [OPTIONS]);
  // ...
};

Или с помощью useMemo для самого объекта:

const options = useMemo(() => ({ threshold: 0.5 }), []);
const memoizedValue = useMemo(() => computeExpensiveValue(options), [options]);

Вывод

Для эффективной мемоизации с useMemo необходимо, чтобы ссылки на объекты в массиве зависимостей оставались стабильными между рендерами. Иначе мемоизация теряет смысл, и вы получаете перерасчёт при каждом рендере.