How to ensure synchronization between JS rendering and UI animation threads?

[finallyblueskies]

Apologies in advance if this is a commonly asked question. I was unable to pinpoint similar threads.

As an example, I have a carousel component where users can swipe through slides. Each slide’s position is controlled via the following useAnimatedReaction:

// slideIndex as a render prop
const CarouselSlide = ({ slideIndex }) => {
  
// get shared values from hook
  useAnimatedReaction(
    () => swipeOffsetPercent.value,
    (offset, prev) => {
      if (offset !== null) {
        position.value += offset * slideWidth.value;
      } else {
        position.value = withSpring(slideWidth.value * slideIndex, {
          velocity: swipeVelocity.value * slideWidth.value,
        });
      }
    }
  );

  return (
    <Animated.View style={{ transform: [{ translateX: position.value }] }}>
      {/*..*/}
    </Animated.View>
  );
};

This setup allows:

1. Dynamic slide positioning during user swipes.
2. Slide positioning based on index when not swiping.
3. Minimal rendering of slides (only those adjacent to the current slide).

To handle slide changes triggered by user gestures, the current slide state is updated as follows (in a gesture handler):

.onEnd((e) => {
    //...
    runOnJS(setCurrentSlide)(slideId);
});

This approach updates the state and triggers a re-render of the slides with their new indices on the JS thread.

Problem:
The main issue arises when the content within the slides is heavy, causing the JS thread FPS to drop. Consequently, it will take a little longer for the slideIndex in the useAnimatedReaction to update as React components re-render, causing the gesture/animation to behave erratically.

Current Workaround:
To mitigate this, I have been duplicating the relevant state into a sharedValue to ensure react-native-reanimated code reads from that. However, this feels like a temporary solution and I foresee similar discrepancies emerging in other areas.

Question:
How can I ensure that the animation/gesture state and the React render state remain in sync, especially in cases where the content is heavy and affects JS thread performance? Are there best practices or patterns that I should follow to avoid these synchronization issues in the long term?

Ideally we would have way of consistently triggering React re-renders on the UI thread. Does such a thing exist?

[MatiPl01]

Hey!

Answering your questions:

Ideally we would have way of consistently triggering React re-renders on the UI thread. Does such a thing exist?

We cannot manually re-render components on the UI thread and trigger re-renders directly from the UI thread.

How can I ensure that the animation/gesture state and the React render state remain in sync, especially in cases where the content is heavy and affects JS thread performance?

You cannot keep the JS and the UI thread in sync. In such a case, both threads will have to wait for each other on every change which will result in huge performance loss. In general, most of the time, you should communicate from the JS to the UI thread (on the JS thread, you create an animation, which is executed on the UJ thread).

---

Questions from me:

• Do your slide components re-render when you swipe the carousel? I mean, do you memoize components that are re-used with React.mamo and don't pass props that will trigger their re-render?
• Could you provide a link to repo with the source code or paste the complete code so that I can see how it works? Could you also provide the recording showing the issue you which described?