-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
cancelAnimationFrame may not work well in useRaf hook #76
Comments
I don't really follow. Why would |
In the specification of
It only guarantees The problem is about how react hooks execute codes, I don't know if there is some 'magic' that would change the normal workflow, since I don't read hook code yet. I use the same code and change your variable assignment to a calculation logic, and got the described problem. |
* Another animation frame will be requested before the cleanup function for `useEffect` is executed. * Use `useLayoutEffect` to replace `useEffect`, in order to guarantee `cancelAnimationFrame` can work well. More details can be found in issue streamich#76
@streamich Sorry for my previous opinion about the problem. I didn't understand the usage of Thanks for other developers' kindly remind, and I figure out where is the problem. The real reason for the problem of this hook is the wrong usage of effect hooks.
There are two different hooks that you would need to set your eyes on when working with hooks and trying to implement lifecycle functionalities. Besides The signature is identical to React Hooks API https://reactjs.org/docs/hooks-reference.html#uselayouteffect Detailed discussion can be found in I also raise a PR #77 to fix it. :-) |
* Another animation frame will be requested before the cleanup function for `useEffect` is executed. * Use `useLayoutEffect` to replace `useEffect`, in order to guarantee `cancelAnimationFrame` can work well. More details can be found in issue #76
I think the logic here may not let current animation stop perfectly, which may lead to memory leak or related things.
https://github.com/streamich/react-use/blob/master/src/useRaf.ts#L28-L30
As
cancelAnimationFrame
method is executed in the clean-up period, the animation ID "stored" inraf
can be perfectly cancelled. However, theonFrame
method may continues (especially when the main thread render DOM slowly, and it will take sometime between useEffect doing cleaning work and your requestAnimationFrame method's running, https://github.com/streamich/react-use/blob/master/src/useRaf.ts#L9 ), so that a newraf
will be assigned, even though you already canvel previousraf
.In this way, you don't clean up previous animation, and next effect will bring in a new animation, which is the problem.
In my opinion, a safe way to guarantee current animation's stop is to add conditions in your main loop method,
onFrame
method can be rewrited to:in which YOUR_CANCEL_CONDITION is the logic you should handle with.
The text was updated successfully, but these errors were encountered: