массив зависимостей useEffect и правило исчерпывающего проникновения ESLint

Question

У меня есть компонент, который выглядит следующим образом:

const MyComponent = props => {
  const { checked, onChange, id } = props;
  const [isChecked, setChecked] = useState(false);

  useEffect(() => {
    onChange && onChange({ isChecked: !!checked, id });
    setChecked(checked);
  }, [checked]);

  const childProps = {
    id,
    isChecked
  };

  return <ChildComponent {...childProps} />;
};

Правило lint от исчерпывающей глубины не устраивает:

В React Hook useEffect отсутствуют зависимости: id и onChange.Либо включите их, либо удалите массив зависимостей.(response-hooks / исчерпывающе-deps) eslint

Я знаю, что id и onChange не изменятся, поэтому добавление их в массив зависимостей кажется ненужным.Но правило не является предупреждением, это четкая инструкция что-то делать.

Является ли правило ESLint:

1) Слишком осторожным и немного глупым в этом случае, поэтому безопасноигнорировать?

2) Подчеркнуть передовой опыт - т.е. минимизировать неожиданные ошибки, которые могут возникнуть в будущем, если, например, изменения в родительских компонентах означают, что id изменится в какой-то момент в будущем?

3) Показывает реальную / возможную проблему с кодом в текущем виде?

Answer 1

На самом деле правило очень простое: либо передавайте массив, содержащий все зависимости, либо ничего не передавайте. Так что я думаю, что правило не глупое, оно просто не знает, будут ли изменяться зависимости или нет. Так что да, если вы передаете массив зависимостей, он должен содержать ВСЕ зависимости, включая те, которые вы знаете, для факта, который не изменится. Примерно так будет выдано предупреждение:

useEffect(() => dispatch({someAction}), [])

И чтобы это исправить, вы должны передать dispatch как зависимость, даже если она никогда не изменится:

useEffect(() => dispatch({someAction}), [dispatch])

Не отключайте исчерпывающее правило deps, как упомянуто здесь

Answer 2

У каждого рендера есть свой взгляд. Если эффект будет таким же с определенным набором значений, то мы можем сообщить React об этих значениях в массиве зависимостей. В идеале, компонент с одинаковым состоянием и реквизитом всегда будет иметь одинаковый результат (визуализированный компонент + эффект) после того, как его рендеринг и эффект будут выполнены. Это то, что делает его более устойчивым к ошибкам.

Смысл правила заключается в том, что, если deps меняются, эффект ДОЛЖЕН запускаться снова, потому что теперь это другой эффект.

Эти 3 ссылки также дают дополнительную информацию об этом:

• https://github.com/facebook/react/issues/14920#issuecomment-471070149
• https://overreacted.io/a-complete-guide-to-useeffect/
• https://overreacted.io/writing-resilient-components/