React Hooks Отсутствует зависимость от useMemo после извлечения

Question

Я создаю useMyData ловушку, которая выполняет следующие действия:

1. Извлекает необработанные данные из некоторого API на основе его входных аргументов (dependencies)
2. Преобразует данные, используя дорогая функция (expensiveMath)
3. Запоминает и возвращает результат

Моя функция выглядит так:

function useMyData(...dependencies) {
  const raw = useFetch(mkUrl(dependencies), dependencies)
  const data = useMemo(() => expensiveMath(raw), dependencies)
  return data
}

raw зависит только от dependencies массив и expensiveMath зависит только от raw, что означает, что он зависит только от входных аргументов (dependencies).

Я хочу избежать вызова expensiveMath, когда входные аргументы не изменились .

Но проблема в том, что я получаю эту ошибку ESLint:

Ошибка ESLint:

React Hook useMemo has a missing dependency: 'raw'. 
Either include it or remove the dependency array 
react-hooks/exhaustive-deps

Я не могу использовать raw в качестве зависимости для useMemo, потому что это большой массив сложных объектов с непредсказуемой длиной.

Какова лучшая практика для моего варианта использования?

Answer 1

Если вы не включите raw в зависимости, то ваш код не будет работать, потому что raw изменится, когда выборка завершится.

На первом рендере useFetch Вызывается и запускает запрос, а затем возвращает заполнитель. Если useFetch это эта библиотека , то этот заполнитель является объектом с loading: true и data: undefined. Далее useMemo выполняется и выполняет expensiveMath в этом заполнителе загрузки.

При втором рендеринге useFetch теперь выполняется и возвращает реальные данные. Но поскольку useMemo не отображает raw как зависимость, запомненное значение используется повторно. Вы не будете делать expensiveMath для реальных необработанных данных.

Итак, исправление заключается в том, чтобы поместить raw в массив зависимостей:

const data = useMemo(
  () => expensiveMath(raw), 
  [raw]
)

Теперь expensiveMath будет перезапущен когда выборка завершится. Я не вижу необходимости помещать dependencies в useMemo, так как они не используются в этой части кода.

Я не могу использовать raw как зависимость для useMemo, потому что это большой массив сложных объектов с непредсказуемой длиной.

Размер не имеет значения. useMemo просто проверяет равенство ссылок между предыдущим значением и новым значением. Так что, пока useFetch написано разумным образом, чтобы оно возвращало стабильные ссылки, когда ничего не изменилось, оно будет работать.