preserve-manual-memoization¶

Проверяет, что компилятор сохраняет существующую ручную мемоизацию. Компилятор React компилирует компоненты и хуки, только если его вывод совпадает с существующей ручной мемоизацией или превосходит её.

Подробности правила¶

Компилятор React сохраняет ваши вызовы useMemo, useCallback и React.memo. Если вы мемоизировали что-то вручную, компилятор считает, что на это была причина, и не уберёт эту мемоизацию. Но неполный список зависимостей не даёт компилятору понять поток данных в коде и применить дальнейшие оптимизации.

Неверно¶

Примеры неверного кода для этого правила:

// ❌ Missing dependencies in useMemo
function Component({ data, filter }) {
  const filtered = useMemo(
    () => data.filter(filter),
    [data] // Missing 'filter' dependency
  );

  return <List items={filtered} />;
}

// ❌ Missing dependencies in useCallback
function Component({ onUpdate, value }) {
  const handleClick = useCallback(() => {
    onUpdate(value);
  }, [onUpdate]); // Missing 'value'

  return <button onClick={handleClick}>Update</button>;
}

Верно¶

Примеры верного кода для этого правила:

// ✅ Complete dependencies
function Component({ data, filter }) {
  const filtered = useMemo(
    () => data.filter(filter),
    [data, filter] // All dependencies included
  );

  return <List items={filtered} />;
}

// ✅ Or let the compiler handle it
function Component({ data, filter }) {
  // No manual memoization needed
  const filtered = data.filter(filter);
  return <List items={filtered} />;
}

Устранение неполадок¶

Нужно ли убирать ручную мемоизацию?¶

Может возникнуть вопрос, делает ли компилятор React ручную мемоизацию ненужной:

// Do I still need this?
function Component({items, sortBy}) {
  const sorted = useMemo(() => {
    return [...items].sort((a, b) => {
      return a[sortBy] - b[sortBy];
    });
  }, [items, sortBy]);

  return <List items={sorted} />;
}

Если вы используете компилятор React, её можно спокойно убрать:

// ✅ Better: Let the compiler optimize
function Component({items, sortBy}) {
  const sorted = [...items].sort((a, b) => {
    return a[sortBy] - b[sortBy];
  });

  return <List items={sorted} />;
}

Источник — https://react.dev/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization