具有动画和useEffect的React.useState

Question

I am trying to implement animation using a wrapper component using useState and useEffect.

If a certain value on the props change I would like that to trigger the start of the animation:

const propVal = getter(props);
const mounted = useRef(true);
useEffect(() => {
  //code to initialize and start animation removed

  //because a started animation uses requestAnimationFrame
  //a component may want to set state for animation while not
  //mounted anymore, prevent the error by setting mounted to false
  return () => (mounted.current = false);
}, [propVal]);//<--if propVal changes the animation starts

Full code is here

The propVal could be the id of an item (new item will animate in) or a property called deleted indicating an item has been removed (should animate out)

I am trying to create a smaller code example to re produce the problem I am facing but was not able (yet) to do so.

The problem is that if I delete an item of then the mounted.current = false (returned callback from useEffects) part gets called even though the component did not unmount.

When I change the code to return () => false && (mounted.current = false); basically removing the safeguard to prevent unmounted components from animating then deleting an item will animate without error. This tells me that the component is not unmounted but somehow the returned callback for onUnmount is called.

Sorry for not (yet) being able to provide a simpler reproduction of this problem. Maybe someone knows why the callback would be called when the component is obviously not unmounted (removing the safe guard does not cause errors and animates as expected)

Answer 1

If I understood correctly, you should set the mounted ref to true in the effect. Otherwise, any change to the propVal dependency will stop recurAnimate from working.

Say the value changes from an id => to "deleted", The cleanup effect runs but the component isn't unmounted, then the effect runs again with the new value, but the isMounted ref keeps recurAnimate locked.

edit: The cleanup function returned from the effect !== componentWillUnmount. It will run every time the effect will be rerun, and then lastly when the component unmounts.