Unnecessary Re-renders in React Native Application Due to react-native-reanimated-carousel and Pagination

[yograjgarg]

In my React Native application, I am experiencing unnecessary re-renders when using the react-native-reanimated-carousel and Pagination.Basic components. The issue seems to be related to how state (progress) and props are being handled, causing the entire application to re-render on changes that should not trigger a full re-render.

Steps to Reproduce:
Import Carousel and Pagination from react-native-reanimated-carousel into a React Native component.
Create a basic carousel with an autoPlay feature and a Pagination.Basic component below the carousel.
Bind the progress state from useSharedValue to the Pagination.Basic component.
Observe that the entire component (including parent components) re-renders when the carousel’s progress changes, even though only the carousel and pagination components should be affected.
Expected Behavior:
Only the Carousel and Pagination components should re-render when progress or carousel data changes. The parent components or other parts of the application should not re-render unnecessarily.

Actual Behavior:
The entire application seems to be re-rendering when the progress value is updated, leading to performance degradation.

Possible Cause:
The issue might be due to how props (progress) and state are passed down and handled by the Carousel and Pagination components, which might be causing unnecessary re-renders. The reanimated hooks, such as useSharedValue, may not be fully optimized in this case.

Environment:
React Native version: "0.76.3"
react-native-reanimated-carousel version: "^4.0.0-alpha.12"
react-native-reanimated version: "~3.16.2"
Platform: [iOS/Android]

Possible Solutions/Workaround:
Memoizing the data array outside the component.
Using React.memo to wrap the Carousel and Pagination components to avoid unnecessary re-renders.
Using useMemo or useCallback for any dynamic styles or functions passed as props.
Additional Information:
I've already tried isolating the components and optimizing them with React.memo and useMemo, but the issue persists.

[dosubot]

Hey @yograjgarg! 👋 I'm here to help you with any bugs, questions, or contributions you have. Let's squash those bugs together!

There are a few relevant threads that might help address the issue of unnecessary re-renders in your application:

1. Open Issue: One solution suggested for similar re-render issues is to ensure that the windowSize property is set. This property helps manage performance by controlling how many items are rendered at a time, which can prevent unnecessary re-renders and improve performance ^[1].

2. Closed Issue: Another workaround involves using a visibleIndex to conditionally render components within the carousel. This approach can help manage re-renders by only rendering the necessary components based on the current index ^[1].

Additionally, the Pagination.Basic component handles the progress prop as a SharedValue<number>, which can trigger re-renders when the value changes. This is because updates to the progress shared value cause the animation to update, leading to re-renders of the PaginationItem components ^[2].

Given these insights, you might want to explore the following strategies:

• Ensure that the windowSize property is appropriately set to limit the number of rendered items.
• Consider using a conditional rendering approach based on the current index to minimize re-renders.
• Double-check the use of useSharedValue and ensure that it is optimized for your use case.

These steps, combined with your existing optimizations using React.memo and useMemo, might help mitigate the re-rendering issue.

To continue talking to Dosu, mention @dosu.

[theerej-avasoft]

@dosu @dohooo Yes happens to me too, consider 100 datas passed in renderItem - > So when one data changes and user is swiping the carousel or just changes in data -> it renders all the 100 item even when only one data is changed

windowSize - is helpful but it causes the UI to disappear and appear when the data for the carousel is not loaded yet ( if i trigger some random unloaded data externally - not by means of swiping)

React.memo is already used - still the same

[Vimiso]

I'm noticing unnecessary re-renders if loop is enabled. It ups re-rendering by x2 and seems to trigger renderItem when the stack hits starting pagination again. Is this the expected behaviour?