React-native-reanimated: Re-renders affects the behavior of the animations (2.0.0-alpha.6)

[gaishimo]

Description

If you run setInterval at the same time as the animation, the animation does not work properly.

In my app, I used setInterval for counting up seconds at the same time as the movement animation. It worked with reanimated 2.0.0-alpha.5 properly. But with 2.0.0-alpha.6, it doesn't work well.

Screenshots

| no setInterval | with setInterval |
|:---:|:-----:|
| | |

Steps To Reproduce

Call setInterval(() => {}, 1000) at the same time as the movement animation

Expected behavior

Animations should work well.

Actual behavior

Animations doesn't work properly

Snack or minimal code example

https://github.com/gaishimo/reanimated-2-playground-1/blob/set-interval-problem/src/App.tsx

If my use of setInterval is not good, I would be happy to get some advice.

Package versions

• React: 16.13.1
• React Native: 0.63.1
• React Native Reanimated: 2.0.0-alpha.6

[gaishimo]

I found that setInterval itself is not a problem and re-renders by changing states or props affects the behavior of the animations.

[terrysahaidak]

It's a new behavior of useSharedValue - each time it receives a new value as the initial value - it will use that value as the value of sV. Do you have something like that?

[terrysahaidak]

In your example I can clearly see it accepts a new object on each render. Try to define it outside the render.

@karol-bisztyga is there a way to disable this behavior when we need it?

[gaishimo]

@terrysahaidak
As you say, in my example I passed an object by literal to useSharedValue.

const position = useSharedValue<Position>({ x: 100, y: 100 })

I changed to define it outside the component and it worked well 👍

// outside render
const INITIAL_POSITION = { x: 100, y: 100 }

const position = useSharedValue<Position>(INITIAL_POSITION)

Thank you!

[karol-bisztyga]

@karol-bisztyga is there a way to disable this behavior when we need it?

Yes it is pretty simple, we decided not to build dependencies like for the other hooks and assign a new value to the shared value on every render due to low cost. If there's a strong need for such thing I can do it anytime(or some simplified version when you would maybe just pass the bool flag whether to reassign or not, just not to harm other use cases' efficiency) but here I saw you guys came up with a decent workaround.

@gaishimo can I close this?

[jakub-gonet]

From my POV I think it's better for DX when we prioritize intuitive behavior over performance. Your both solutions sound great, I'm personally more fond of deps one but both are good.

Resolved, so closing.

[gaishimo]

I understand the current useSharedValue behavior. Thanks.

If a situation in which I want to disable this behavior comes up with, I'll let you know.