UI Thread stutters on mount/unmount

[mrousavy]

Bug

Hey all! I'm so excited for V6, great work y'all!

I've been playing around with V6 for a while now, and noticed that my animations are stuttering a lot when mounting/unmounting <Video> components.

This is due to lots of work done on the Main UI Thread, which will probably be a bit tricky to profile, and I couldn't really find the issue right away in my quick 10 min profiling session - I'll take a closer look next week or so!

Platform

• iOS

Environment info

Library version: V6 beta.2 Device: iPhone 11 Pro

Steps To Reproduce

1. Mount Video and run a REA animation
2. Notice lag in REA animation ...

Expected behaviour

1. No lag in REA animation (no UI stutters)

Reproducible sample code

Video sample

In this case, the micro stutters can be noticed while swiping left & right. In this video it isn't immediately noticeable, but on a 120Hz iPhone the stutters become quite disrupting.

https://github.com/react-native-video/react-native-video/assets/15199031/f15ef1e6-4ec2-4d9a-b61c-bfd04061d148

[mrousavy]

The video sample is maybe a bad example here, since it's really not noticeable in the video except if you skip through each frame - you'll find duplicate frames (this is where the animation hangs).

It's more noticeable when actually mounting the Video for the first time.

[braincore]

I'm also observing this in 6.0.0-beta.2, but not in 5.2.1.

[KrzysztofMoch]

Hey @mrousavy, is this issue still reproducible for you?

[braincore]

@KrzysztofMoch The stutter still reproduces for me swiping between flatlist entries each containing a react-native-video component. Rather than the mount/unmount, I believe the stutter is triggered by the call to resume().