AmazonAppDev / react-native-multi-tv-app-sample

📺🚀 React Native TV app sample for Android TV, Fire TV, tvOS, and web. Features customizable drawer navigation 🗂️, content grid 🖼️, hero header 🦸‍♂️, and video player 🎥. Built with Expo. Perfect starter for cross-platform TV app development! 🌟
MIT No Attribution
30 stars 10 forks source link

Perf improvement focus #6

Closed giolaq closed 1 month ago

giolaq commented 1 month ago

Feature: Optimize IndexScreen Component Performance

Thanks to @efahsl for raising the issue, suggesting a solution and testing.

Summary

This PR implements several performance optimizations for the IndexScreen component, focusing on reducing unnecessary re-renders and improving the efficiency of data handling and UI updates.

Motivation

The previous implementation of IndexScreen was causing performance issues, particularly when focusing on different items. These optimizations aim to improve the overall responsiveness and efficiency of the component, especially for TV-like interfaces where smooth navigation is crucial.

Main Changes

  1. Implemented a memoized focusedItem to replace multiple state variables.
  2. Optimized the renderHeader function using useCallback.
  3. Simplified the onFocus callback to reduce state updates.
  4. Memoized renderScrollableRow and renderItem functions to prevent unnecessary recreations.
  5. Removed the onViewableItemsChanged callback as it's no longer needed with the new focus handling approach.

Implementation Details

Testing Considerations

Potential Impacts

Testing: Tested on the respective platforms.

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.