Блог

У меня возникли проблемы с пониманием того, как сделать эквивалент componentDidMount и componentWillUnmount с react-hooks/exhaustive-deps помощью правила lint в моем приложении. Например, при загрузке компонента я хочу загрузить некоторые данные и очистить их после завершения. Так что я мог бы написать что-то в этом роде.

 React.useEffect(() => {
  loadDataById(id, other, properties);
  return () => {
    resetDataById(id);
  };
}, []);
  

Проблема теперь в том, что мы включили правила реагирования на ворсинки. Предполагается, что мне нужно будет включить id , other , и properties в список зависимостей в этом примере. Но если я это сделаю, методы loadDataById and resetDataById будут вызываться, когда other и properties изменятся, но я хочу их только при загрузке / выгрузке компонента. Я отказался от простого отключения этого правила lint для этих конкретных строк, но это похоже на анти-шаблон для чего-то, что будет достаточно распространенным в нашем приложении.

Если вы считаете, что ваш хук должен выполняться только один раз и только один раз, даже если зависимости меняются. Вы всегда можете игнорировать это правило eslint, используя директиву comment, например:

 React.useEffect(() => {
  loadDataById(id, other, properties);
  return () => {
    resetDataById(id);
  };
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);