You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
There appears to be no canceling of the animation when the component unmounts. onFinished will still fire, even if the component has been removed from the DOM by React. The internals of use-web-animation also perform state updates during the animation cycle, which causes a warning from react.
How to Reproduce
Go to the code sandbox link below
Watch the console
After 2 seconds you will see the typical react error:
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
JustWaitAnim@https://zzit3.csb.app/src/App.js:27:58
I've traced this into the code, and I believe the warning originates from checking then setting the animation state:
Personally, I didn't expect the onFinish callback to fire if unmounted! But I understand why it does. Mostly, I don't think the hook should trigger React warnings.
I see a few possibilities:
prevent checking for animation state if the component unmounts
provide a flag option (autocancel?) that will call animation.cancel(), as well as cancel any checking and callback execution.
I ran into this bug because I was controlling the autoplay option with a component property. This actually resulted in the animation running twice! It took me several hours before I found the issue: use-web-animations uses these values to know whether to apply the animation. Thus, it assumed that it was a new animation configuration and should be applied. I was using the onFinish callbacks to trigger logic updates, which caused many bugs due to firing twice!
Additional Information
Thank you for making use-web-animations! I think it's a really neat library!
The text was updated successfully, but these errors were encountered:
@wallyshen Great job! And yes, I was using the playback patterns you provided too, but was also using autoplay as a prop. I naively assumed that would work since I didn't realize that use-web-animation relies on the options object identity to know whether to recompute.
Bug Report
Describe the Bug
There appears to be no canceling of the animation when the component unmounts.
onFinished
will still fire, even if the component has been removed from the DOM by React. The internals ofuse-web-animation
also perform state updates during the animation cycle, which causes a warning from react.How to Reproduce
I've traced this into the code, and I believe the warning originates from checking then setting the animation state:
use-web-animations/src/useWebAnimations.ts
Lines 133 to 134 in f49256d
CodeSandbox Link
Codesandbox link: https://codesandbox.io/s/use-web-animations-no-state-unmounted-component-bug-zzit3?file=/src/App.js
Expected Behavior
Personally, I didn't expect the
onFinish
callback to fire if unmounted! But I understand why it does. Mostly, I don't think the hook should trigger React warnings.I see a few possibilities:
autocancel
?) that will callanimation.cancel()
, as well as cancel any checking and callback execution.I ran into this bug because I was controlling the
autoplay
option with a component property. This actually resulted in the animation running twice! It took me several hours before I found the issue:use-web-animations
uses these values to know whether to apply the animation. Thus, it assumed that it was a new animation configuration and should be applied. I was using theonFinish
callbacks to trigger logic updates, which caused many bugs due to firing twice!Additional Information
Thank you for making
use-web-animations
! I think it's a really neat library!The text was updated successfully, but these errors were encountered: