cancelAnimationFrame may not work well in useRaf hook

[hijiangtao]

cancelAnimationFrame may not work well in useRaf hook

[streamich]

I don't really follow. Why would onFrame execute if it was cancelled by cancelAnimationFrame?

[hijiangtao]

In the specification of Promise, which defines cancelAnimationFrame should follow:

cancelAnimationFrame might be called for an entry in the Document’s animation frame request callback list or in the sample all animations operation’s temporary list. In either case the entry’s cancelled flag is set to true so that the callback does not run.

It only guarantees onFrame of selected ID will be stopped, however, In the second parameter, which is the clean-up function, animation ID may has already increased when executing these codes, which is said: the raf you called in cancelAnimationFrame is N, but the above code may already runs loop part and assigned raf with N+1. ID N is stopped, but ID N+1 can still run normally.

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.

[hijiangtao]

@streamich Sorry for my previous opinion about the problem. I didn't understand the usage of useEffect hook well, and mistakenly blame the problem to the usage of cancelAnimationFrame API.

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.

• 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.

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 useEffect, there is another hook can toggle effect change, and that is useLayoutEffect.

The signature is identical to useEffect, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.

React Hooks API https://reactjs.org/docs/hooks-reference.html#uselayouteffect

Detailed discussion can be found in
https://stackoverflow.com/questions/53781632/whats-useeffect-execution-order-and-its-internal-clean-up-logic-in-react-hooks.

I also raise a PR #77 to fix it. :-)