Что на счет useMemo и зависимость?

Question

[SerjSkachkov]

Есть мемоизированная функция.

Пример в которой есть 3 зависимости value1, value2, value3.
Но используем в функии всего 2 зависимости value1, value2,

Получаем варнинг
react hook usememo has an unnecessary dependency "value3" какие есть варианты решения ?

const memoizedValue = useMemo(() => computeExpensiveValue(value1, value2 ), [value1, value2, value3]);

Comments

[YavaDev]

Так уберите value3. Зачем вы добавили ее в зависимость?

[SerjSkachkov]

YavaDev, там есть данные и если данные обновились нужно выполнить пересчет

[YavaDev]

SerjSkachkov, так если value3 измениться, это же никак не повлияет на перемнную memoizedValue. Ну только если вы используете value3 напрямую внутри функции computeExpensiveValue, а не передаете ее как аргумент.

[SerjSkachkov]

YavaDev, ну на деле код выглядит немного иначе .

[YavaDev]

SerjSkachkov, снова таки я не вижу, как переменная allTransactions влияет на ваш код.
Но если вам все же надо, что бы allTransactions была в зависимостях, тогда может лучше использовать useEffect.
Например:

const [state, setState] = useState();
useEffect(() => {
  setState(computeExpensiveValue(value1, value2 ))
}, [value1, value2, value3]);

Answer 1

[Anton Filippov]

В вашем примере ничего не зависит от value3, можно убирать.

Comments

[SerjSkachkov]

а если например в валью 3 есть некие данны где при изменении этих данных , нужно запустить пересчет функции

[Anton Filippov]

SerjSkachkov, вы имеете ввиду, что от value3 завивист computeExpensiveValue? если так, то вы должны её объявить через useCallback, и туда в зависимость прокинуть value3, а в memoizedValue прокинуть computeExpensiveValue, как зависимость.

Вообще выглядит, что вы нагородили 2 подхода, либо сделайте функцию computeExpensiveValue чистой, чтобы она не зависела от внешних переменных, либо уже тогда в ней все считайте, в ней все зависимости от переменных пропишите, а в useMemo только ее в [] указывайте.