Comments (3)
I don't really follow. Why would onFrame
execute if it was cancelled by cancelAnimationFrame
?
from react-use.
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.
from react-use.
@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 replaceuseEffect
, in order to guaranteecancelAnimationFrame
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. :-)
from react-use.
Related Issues (20)
- useMeasure dimensions out of sync in react18 HOT 2
- Please add a list of valid keys to https://github.com/streamich/react-use/blob/master/docs/useKey.md HOT 1
- useMedia deprecated methods HOT 1
- There is deprecated dependency in your nano-css HOT 1
- useWindowSize does not work on App Router (nextjs) HOT 1
- useCopyToClipboard: accept options object to pass to copy-to-clipboard HOT 2
- useCopyToClipboard: accept options object to pass to copy-to-clipboard
- [question]: How can I combine useMeasure with useHoverDirty HOT 1
- useLocalStorage doesn't not remove key on setValue(undefined) HOT 1
- useLocalStorage documentation: warn against calling with same key in multiple components HOT 3
- useLocalStorage without 'or undefined' HOT 2
- Breaking rules of hooks leads to incorrect behaviour in useLocalStorage
- useMedia throw "addEventListener is not a function" error occurs in browsers ios13.1 and below HOT 2
- a question, how to creat a shortcut for macos
- setValue function in useLocalStorage hook doesn't return the correct previous value
- Add useTitle option to restore original on unmount
- Security Issue HOT 6
- useStateWithHistory: initialState of function type are not handled correctly HOT 1
- useCookie does not react to changes in the passed in "cookieName" HOT 2
- window being used outside client side hook leads to server side ReferenceError Next.js 14 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-use.