React hook useEffect dependency array : <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>
