In this example, I have shared abut React hook useEffect dependency array. I would recommend you to write this as following example:
1 2 3 4 5 6 7 8 | const previousFooRef = useRef(props.foo); useEffect(() => { if (previousFooRef.current !== props.foo) { animateSomething(ref, props.onAnimationComplete); previousFooRef.current = props.foo; } }, [props.foo, props.onAnimationComplete]); |
You can’t avoid the complexity of having a condition inside the effect, because without it you will run your animation on mount rather than just when props.foo changes. The condition also allows you to avoid animating when things other than props.foo change.
By including props.onAnimationComplete in the dependencies array, you avoid disabling the lint rule which helps ensure that you don’t introduce future bugs related to missing dependencies.
Reference:
https://stackoverflow.com/questions/55228102/react-hook-useeffect-dependency-array
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
