React Hooks: Почему правилу исчерпывающего deps linter требуется локальная функция, используемая в useMemo в списке зависимостей?

Question

Если я использую локальную функцию в функции, которую я передаю useMemo (или другим хукам), правило linter исчерпывающего deps запрашивает локальную функцию в списке зависимостей useMemo. Я понимаю, что с каждым рендером локальная функция - это новый экземпляр. Но поскольку он никогда не меняется, на мой взгляд, нет необходимости вносить его в список зависимостей, особенно потому, что тогда мне нужно использовать useCallback для функции (что делает код более сложным).

Здесь рабочий пример:

const [inputNumber, setInputNumber] = useState(35);

function calculateFibonacciNumber(number) {
   return number < 1 ? 0 : number <= 2 ? 1 
      : calculateFibonacciNumber(number - 1) + calculateFibonacciNumber(number - 2);
};

const fibonacciNumber = useMemo(() => {
   return calculatedFibonacciNumber = calculateFibonacciNumber(inputNumber);
}, [inputNumber]); // Here the exhaustive-deps rule wants calculateFibonacciNumber in the dependency list

Итак, есть ли реальная причина, по которой calculateFibonacciNumber следует поместить в список зависимостей (через useCallback)?

Answer 1

Я предполагаю, что причина в том, что вы используете calculateFibonacciNumber вне неподвижного useMemo.

Может быть, вы могли бы попытаться переместить определение внутрь, например, так:

const fibonacciNumber = useMemo(() => {
   function calculateFibonacciNumber(number) {
      return number < 1 ? 0 : number <= 2 ? 1 
         : calculateFibonacciNumber(number - 1) + calculateFibonacciNumber(number - 2);
   };

   return calculatedFibonacciNumber = calculateFibonacciNumber(inputNumber);
}, [inputNumber]);

В этом случае вы не увидите этого предупреждающего сообщения.

Надеюсь, это поможет!