title: Understanding the React Hooks 'exhaustive-deps' lint rule
body: <p>I'm having a hard time understanding the 'exhaustive-deps' lint rule.</p>
  <p>I already read <a href="https://stackoverflow.com/questions/58549846/react-useeffect-hook-with-warning-react-hooks-exhaustive-deps">this post</a> and <a href="https://stackoverflow.com/questions/57983717/designing-react-hooks-prevent-react-hooks-exhaustive-deps-warning">this post</a> but I could not find an answer.</p>
  <p>Here is a simple React component with the lint issue:</p>
  <pre><code>const MyCustomComponent = ({onChange}) =&gt; {
      const [value, setValue] = useState('');
  
      useEffect(() =&gt; {
          onChange(value);
      }, [value]);
  
      return (
          &lt;input 
             value={value} 
             type='text' 
             onChange={(event) =&gt; setValue(event.target.value)}&gt;
          &lt;/input&gt;
      )
  } 
  </code></pre>
  <p>It requires me to add <code>onChange</code> to the <code>useEffect</code> dependencies array. But in my understanding <code>onChange</code> will never change, so it should not be there.</p>
  <p>Usually I manage it like this:</p>
  <pre><code>const MyCustomComponent = ({onChange}) =&gt; {
      const [value, setValue] = useState('');
  
      const handleChange = (event) =&gt; {
          setValue(event.target.value);
          onChange(event.target.value)
      }
  
      return (
          &lt;input 
             value={value} 
             type='text'
             onChange={handleChange}&gt;
          &lt;/input&gt; ​
      )
  } 
  </code></pre>
  <p>Why the lint? Any clear explanation about the lint rule for the first example?</p>
  <p><em>Or should I not be using <code>useEffect</code> here? (I'm a noob with hooks)</em></p>