Как передать примитивные значения из объекта в массив зависимостей useMemo вместо ссылки на объект?

Проблема передачи объекта в зависимости

Когда вы передаете объект в массив зависимостей useMemo, React сравнивает ссылки на объекты. Если объект создается заново при каждом рендере (даже с теми же значениями полей), useMemo будет пересчитывать значение каждый раз, что сводит на нет оптимизацию.

Решение: передача примитивов

Вместо объекта передавайте его примитивные свойства по отдельности. Это позволяет React сравнивать значения, а не ссылки.

// Плохо: объект создается заново каждый рендер
const obj = { a: 1, b: 2 };
const result = useMemo(() => compute(obj), [obj]);

// Хорошо: передаем примитивы
const result = useMemo(() => compute(obj.a, obj.b), [obj.a, obj.b]);

Практический пример

Рассмотрим компонент, который фильтрует список на основе параметров:

function FilteredList({ filters }) {
  // Плохо: filters - объект, может быть новой ссылкой
  const filtered = useMemo(() => {
    return items.filter(item => item.price > filters.minPrice);
  }, [filters]);

  // Хорошо: передаем только нужные примитивы
  const filtered = useMemo(() => {
    return items.filter(item => item.price > filters.minPrice);
  }, [filters.minPrice]);
}

Когда это полезно

Этот подход особенно важен при работе с пропсами-объектами от родительских компонентов, контекстом или результатами других хуков. Он предотвращает ненужные пересчеты и улучшает производительность.

Вывод: Передавайте в зависимости useMemo только примитивные значения, которые действительно влияют на результат. Это делает код более предсказуемым и эффективным, особенно в компонентах с частыми ререндерами.