Skip to content

Commit

Permalink
[v1] Replace setImmediate with requestAnimationFrame (#1521)
Browse files Browse the repository at this point in the history
## Description

Fixes #1520 

requestAnimationFrame is called before frame is flushed, as soon as possible.
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

## Screenshots / GIFs

Change can be seen clearly when using imperative Value.setValue(number) along with calling React.setState. React.setState is handled much faster in this scenario.


Background color in below example is updated via standard React state cycle, and position is set via ReanimatedNode.setValue. Both are fired in same synchronous scope (see below repo).

### Before
![setImmediate](https://user-images.githubusercontent.com/21238529/101675012-7edf5d00-3a59-11eb-9884-1d9548d33a7c.gif)

### After
![requestAnimationFrame](https://user-images.githubusercontent.com/21238529/101675033-83a41100-3a59-11eb-966f-86628e641a50.gif)



## Test code and steps to reproduce
https://github.com/DrRefactor/reanimated-issue-1520-repro

I've included instructions for running versions "before" and "after". I'm not sure this is the easiest way to do so though.

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes


Co-authored-by: Paweł Więckowski <pawel.wieckowski@schange.com>
  • Loading branch information
2 people authored and jakub-gonet committed Mar 9, 2021
1 parent 3c6d763 commit 02271f8
Showing 1 changed file with 4 additions and 1 deletion.
5 changes: 4 additions & 1 deletion src/core/AnimatedNode.js
Expand Up @@ -69,6 +69,9 @@ function runPropUpdates() {
loopID += 1;
}

const scheduleUpdates =
Platform.OS === 'web' ? requestAnimationFrame : setImmediate;

export default class AnimatedNode {

__nodeID;
Expand Down Expand Up @@ -135,7 +138,7 @@ export default class AnimatedNode {
__markUpdated() {
UPDATED_NODES.push(this);
if (!propUpdatesEnqueued) {
propUpdatesEnqueued = setImmediate(runPropUpdates);
propUpdatesEnqueued = scheduleUpdates(runPropUpdates);
}
}

Expand Down

0 comments on commit 02271f8

Please sign in to comment.