Чтобы указать или не указывать все зависимости useEffect

Я создал эту конструкцию useEffect, чтобы сначала запустить проверку, а затем отправить данные, если они прошли проверку:

  const isFirstRun = useRef(true);

  useEffect(() => {
    if (isFirstRun.current) {
      isFirstRun.current = false;
      return;
    }

    if (isProcessing) {
      validate();
    } else {
      if (_.isEmpty(validationErrors)) {
        console.log('*** Ready to POST ***');

      }  
    }
  }, [isProcessing]);

Меня вполне устраивает наличие только isProcessing в качестве единственной зависимости для useEffect, но линтер VSCode настаивает на том, чтобы также были включены validate и validationErrors.

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

Как бы вы справились с этой ситуацией?


reactjs use-effect
person robertwerner_sf    schedule 07.10.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Просто потому, что линтер VSCode предлагает сделать это лучше всего. Вы, мой друг, прекрасно справляетесь, только запуская useEffect, и только тогда, когда вам нужно, в вашем случае, когда isProcessing изменяется, это идеальный способ оптимизировать и снизить нагрузку на обработку приложений.

Ваш случай 1. Добавление проверки

Вы как-то правы, поскольку ссылка на функцию не меняется, поэтому она не запускает useEffect

Ваш случай 2. Добавление validationErrors

Это может быть большой проблемой, если ваша validate функция изменяет validationErrors, поскольку она создаст большую цепочку validationErrors модификаций, которая в некоторых конкретных случаях приведет к бесконечному вызову useEffect.

Так что да, вы можете проигнорировать это предложение. useEffect - действительно отличная вещь, но с ней нужно быть осторожным. :-)

person Vikas Saini    schedule 07.10.2019