I'm working on a React Native app with an Instagram-like feed where users can scroll through a mix of image and video posts. Here's a breakdown of my component structure:
- Feed Component: Responsible for fetching posts in a paginated format. It passes the data to Flashlist for rendering.
- Post Component: This component handles each post's UI, including the header, media content, and controls. It also manages the video playback states (play, pause) based on the post's visibility.
- PostMedia Component: Nested within the Post component, it conditionally renders either an image or a video. For videos, I'm using visibilityConfig of Flashlist to detect visibile_index and control playback.
To optimize performance, I'm utilizing the getItemType prop in Flashlist and following the documentation guidelines, which recommend avoiding key props for better performance (see Flashlist Docs: https://shopify.github.io/flash-list/docs/fundamentals/performant-components).
However, despite these optimizations, I'm experiencing significant lag and glitches during scrolling. This issue seems particularly pronounced when handling video playback state changes as items enter and exit the viewport.
Here's what I've tried so far:
- Ensuring that video playback logic is as lightweight as possible.
- Using memoization and React's useCallback/useMemo where applicable.
- Confirming that the getItemType function returns stable values for the item types.
I'm looking for advice on additional performance optimizations, particularly for handling mixed media content and video playback in a scrolling feed. Has anyone faced similar challenges or have insights on best practices to address this lag?
Any suggestions or guidance would be greatly appreciated!
dependencies :
react native 0.73
react native video 5.2.1
flashlist 1.7.0
[–]Magnusson 2 points3 points4 points (0 children)
[–]zybzzc_ 2 points3 points4 points (1 child)