Могу ли я использовать ловушку React, содержащую ссылку, не вызывая исчерпывающую задержку deps? - PullRequest
0 голосов
/ 24 апреля 2020

Довольно специфическая проблема.

Я использую значение isMounted, чтобы предотвратить выполнение функции useEffect. Это не вызывает исчерпывающую задержку deps, когда она содержится внутри самого компонента:

const MyComponent = ({ value }) => {
  const isMounted = useRef(false);
  useEffect(() => {
    isMounted.current = true;
  }, []);

  useEffect(() => {
    if (isMounted.current) {
      console.log(value);
    }
  }, [value]); // no exhaustive deps error

  return <div />
}

Но если мы абстрагируем это в ловушку, вот так:

// useIsMounted.js
export const useIsMounted = () => {
  const isMounted = useRef(false);
  useEffect(() => {
    isMounted.current = true;
    return () => {
      isMounted.current = false;
    };
  }, []);
  return isMounted;
};
// MyComponent.js
const MyComponent = ({ value }) => {
  const isMounted = useIsMounted();

  useEffect(() => {
    if (isMounted.current) {
      console.log(value);
    }
  }, [value]); // has exhaustive deps error

  return <div />
}

Затем мы получаем ошибку линтинга.

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

Спасибо

Редактировать: Я на самом деле немного рефакторинг, чтобы использовать сравнения с предыдущими значениями в моих ловушках эффектов вместо проверок монтирования и так немного чище для моего конкретного случая. Однако несоответствие описанной выше ошибке линтинга мне все еще странно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...