Как установить зависимость useEffect, когда вычисление, использующее stateB, должно запускаться изменением stateA

Question

function Example() {
  const [stateA, stateA] = useState(0);
  const [stateB, stateB] = useState(0);

  useEffect(() => {
    // this calculation should only be trigged by the change of stateA
    // but it somehow uses the stateB for calculation

    const calculation = () => {
      console.log(stateB);
    };
    calculation();
  }, [stateA]);

  return null;
}

Согласно руководству от https://overreacted.io/a-complete-guide-to-useeffect/, мне интересно, как правильно установить зависимость в этом случае

Answer 1

Если вы используете результат расчета в своем компоненте, это звучит как хороший вариант использования useCallback хука .

const someResult = useCallback(() => {
  return doSomething(stateB);
}, [stateA])

Если вы хотите просто запустите какой-нибудь случайный эффект, тогда useEffect будет правильным. Вам просто нужно указать stateA в массиве зависимостей.

useEffect(() => {
  doSomething(stateB);
}, [stateA])

Если вы используете правило линтинга exhaustive-deps, вы получите предупреждение в обоих случаях. Это связано с тем, что ваш мемоизированный расчет основан на stateB, но не будет пересчитан при обновлении stateB, что означает, что ваши расчеты могут быть устаревшими. У вас есть несколько вариантов:

• Добавить stateB в массив зависимостей (ваши вычисления будут происходить при обновлении stateA или stateB.
• Игнорировать правило линтинга . Вы можете подавить предупреждение, поместив этот комментарий в строку перед массивом зависимостей: // eslint-disable-next-line react-hooks/exhaustive-deps

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