title: React hook useEffect dependency array
body: <p>I trying to wrap my head around the new hooks api of react. Specifically, I'm trying to construct the classic use case that once was the following: </p>
  
  <pre><code>componentDidUpdate(prevProps) {
      if (prevProps.foo !== this.props.foo) {
          // animate dom elements here...
          this.animateSomething(this.ref, this.props.onAnimationComplete);
      }
  }
  </code></pre>
  
  <p>Now, I tried to build the same with a function component and <code>useEffect</code>, but can't figure out how to do it. This is what I tried:</p>
  
  <pre><code>useEffect(() =&gt; {
      animateSomething(ref, props.onAnimationComplete);
  }, [props.foo]);
  </code></pre>
  
  <p>This way, the effect is only called when props.foo changes. And that does work – BUT! It appears to be an anti-pattern since the <code>eslint-plugin-react-hooks</code> marks this as an error. All dependencies that are used inside the effect should be declared in the dependencies array. So that means I would have to do the following:</p>
  
  <pre><code>useEffect(() =&gt; {
      animateSomething(ref, props.onAnimationComplete);
  }, [props.foo, ref, props.onAnimationComplete]);
  </code></pre>
  
  <p>That does not lead to the linting error BUT it totally defeats the purpose of <em>only</em> calling the effect when <code>props.foo</code> changes. I don't WANT it to be called when the other props or the ref change.</p>
  
  <p>Now, I read something about using <code>useCallback</code> to wrap this. I tried it but didn't get any further.</p>
  
  <p>Can somebody help?</p>