Необходимо обернуть каждую зависимость useMemo в useCallback

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

Итак, у меня есть дорогостоящая операция, которая зависит от 3 объектов, хранящихся в хранилище redux. Поскольку это дорого, я хочу выполнять его только при изменении любого из этих трех объектов.

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

const computedValue = useMemo(() => {
  ...
  const result = processStoreObject1(storeObject1)
  ...
}, [storeObject1, storeObject2, storeObject3, processStoreObject1])

Теперь я не хочу перечислять processStoreObject1 как зависимость useMemo, вычисленное значение не зависит от него, вычисленное значение зависит только от объекта 3 store. Однако, если я не укажу эту функцию как зависимость от useMemo, я получаю это предупреждение о ворсинах:

"У React Hook useMemo отсутствует зависимость: 'processStoreObject1'. Либо включите ее, либо удалите массив зависимостей. Eslint(react-hooks/excustive-deps)"

Из-за этого предупреждения я должен включить функцию в массив зависимостей и потому, что функция объявлена ​​внутри компонента, примерно так:

const MyComponent = () => {
  ...
  const processStoreObject1 = () => {
    // Do something
  }
  ...
}

Я должен обернуть его в useCallback, иначе он меняется с каждым рендером, и useMemo все время пересчитывается (что неверно). Предупреждение, которое я получаю, если не оборачиваю processStoreObject1 с помощью useCallback, выглядит следующим образом:

"Функция 'processStoreObject1' изменяет зависимости useMemo Hook (в строке NNN) при каждом рендеринге. Чтобы исправить это, оберните определение 'processStoreObject1' в его собственное useCallback() Hook.eslint(react-hooks/ исчерпывающие-deps) "

Я знаю, что одно простое решение - определить processStoreObject1 вне компонента, чтобы он не создавался при каждом рендеринге, но мне это не нравится, функция используется только внутри компонента, поэтому я хочу, чтобы определение было там.

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

Буду благодарен, если кто-нибудь сможет мне помочь.

Благодаря!

0 ответов

Другие вопросы по тегам