Delay in applying animated styles during decreased app performance

[bglgwyng]

Description

I previously reported an issue regarding the delayed application of animated styles when the connected shared value is updated, as discussed in link to the discussion. Subsequently, I discovered that the problem was addressed in ticket #3970. To resolve the issue, I upgraded to version 3.1.0 of react-native-reanimated and verified that the solution worked in my test case.

Unfortunately, I noticed that the same behavior persists in my production application. To further investigate, I introduced some insignificant computations in the test case and was able to reproduce the same behavior. The frequency of the issue increased as I added more computations.

In essence, the updates to animated styles are still delayed until the next frame when the app's performance decreases, resulting in visible flickering. In my production application, I frequently observe this behavior even when the decrease in performance is not significant and the frame rates remain close to 60.

Steps to reproduce

1. Trigger a rerender in React by updating the component's states.
2. Update connected shared values within the useLayoutEffect hook to trigger animated style updates.
3. Observe that the animated styles are not immediately updated.
4. Introduce meaningless computations to the code to increase the frequency of reproducing the behavior.

Snack or a link to a repository

https://github.com/bglgwyng/Reanimated3Sandbox/tree/animated-style-test

Reanimated version

3.1.0

React Native version

0.71.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Release mode

Device

Real device

Device model

iPhone 13

Acknowledgements

Yes

[bglgwyng]

When the updates from reanimated and react-native sync together perfectly, then there's no chance to see the red square without the green one. However, as you can see in the second transition, there only appears the red screen which just blinks for milliseconds. You can see it more clearly by skipping frames

replay.mp4

[kmagiera]

Thanks @bglgwyng for working on the example. I saw your comments on #4978 and also verified that this problem has been resolved by #5224 – you should no longer experience the issue after updating to 3.6.1 which is the first version that included this fix. Thanks!

[bglgwyng]

@kmagiera, I am still encountering this issue in my app. It can be easily observed with the example posted here. The example includes an intentionally performance-degrading routine, as shown below:

{foo && new Array(1000).fill(0).map((_, i) => <View key={i} />)}

This particular line leads to frame drops, making the behavior more noticeable.

[sansavision]

I am also noticing this in a drawing app, it updates slower than useRef which updates immediately but unfortunately i cannot use that in useDerivedValue, so is there any way to force it to update immediately?