title: useEffect dependency array and ESLint exhaustive-deps rule
body: <p>I have a component that looks like this:</p>
  
  <pre><code>const MyComponent = props =&gt; {
    const { checked, onChange, id } = props;
    const [isChecked, setChecked] = useState(false);
  
    useEffect(() =&gt; {
      onChange &amp;&amp; onChange({ isChecked: !!checked, id });
      setChecked(checked);
    }, [checked]);
  
    const childProps = {
      id,
      isChecked
    };
  
    return &lt;ChildComponent {...childProps} /&gt;;
  };
  </code></pre>
  
  <p>The exhaustive-deps lint rule isn't happy:</p>
  
  <blockquote>
    <p>React Hook useEffect has missing dependencies: <code>id</code> and <code>onChange</code>.
    Either include them or remove the dependency array.
    (react-hooks/exhaustive-deps)eslint</p>
  </blockquote>
  
  <p>I know that <code>id</code> and <code>onChange</code> are not going to change, so adding them to the dependency array seems unnecessary. But the rule isn't a warning, it's a clear instruction to do something.</p>
  
  <p>Is the ESLint rule:</p>
  
  <p>1) Over-cautious and a bit dumb in this instance, so safe to ignore?</p>
  
  <p>2) Highlighting best practice - i.e. to minimise unexpected bugs that might occur in future if, for instance, changes in parent components mean that id <em>will</em> change at some point in future?</p>
  
  <p>3) Showing an actual/possible problem with the code as it currently is?</p>