title: Use functions as useEffect dependencies -> "dependency 'props' missing"
body: <p>My intention is to use a function (received by a parent component, created with <code>useCallback</code>) as dependency in <code>useEffect</code> and only trigger that effect if the function changes.</p>
  <p>Consider the following simple component:</p>
  <pre><code>function MyComponent(props) {
    const [myState, setMyState] = useState(0);
  
    useEffect(() =&gt; {
      setMyState(props.calculate(1));
    }, [props.calculate]) 
  
    return &lt;h1&gt;{myState}&lt;/h1&gt;;
  }
  </code></pre>
  <p>It receives a function <code>calculate</code> in props and computes <code>myState</code> from it. However I get the linting error:</p>
  <pre><code>React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array.
  </code></pre>
  <p>I don't understand why <code>props.calculate</code> is not sufficient as a dependency and we need <code>props</code>. I don't want to use <code>props</code> because then the effect would retrigger on every render, even if <code>calculate</code> did not change. (Assume <code>calculate</code> has been created using <code>useCallback</code> in parent).</p>
  <p>The following version does not get any linting errors:</p>
  <pre><code>function MyComponentVersion2(props) {
    const { calculate } = props;
    const [myState, setMyState] = useState(0);
  
    useEffect(() =&gt; {
      setMyState(calculate(1));
    }, [calculate]) 
  
    return &lt;h1&gt;{myState}&lt;/h1&gt;;
  }
  </code></pre>
  <p>My questions are:</p>
  <ul>
  <li>Why is the linter not fine with <code>MyComponent</code>?</li>
  <li>Are there semantical differences in <code>MyComponent</code> compared to <code>MyComponentVersion2</code>?</li>
  </ul>
  <p>I made a minimal example here in this <a href="https://codesandbox.io/s/infallible-gauss-ee4xg?file=/src/App.js" rel="nofollow noreferrer">codesandbox</a></p>
  <p>Thank you!</p>