📺🚀 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! 🌟
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
Implemented a memoized focusedItem to replace multiple state variables.
Optimized the renderHeader function using useCallback.
Simplified the onFocus callback to reduce state updates.
Memoized renderScrollableRow and renderItem functions to prevent unnecessary recreations.
Removed the onViewableItemsChanged callback as it's no longer needed with the new focus handling approach.
Implementation Details
Replaced separate state variables (headerImage, headerTitle, headerDescription) with a single focusedItem derived from focusedIndex.
Refactored renderHeader to use the memoized focusedItem.
Simplified onFocus to only update focusedIndex.
Applied useCallback to renderScrollableRow and renderItem for better performance.
Testing Considerations
Verify that the component still functions correctly after these optimizations.
Test on lower-end devices to ensure improved performance.
Check that focus behavior and header updates work as expected.
Potential Impacts
This change should significantly improve the performance and responsiveness of the IndexScreen.
The way focused items are handled has changed, which might affect any components or logic that relied on the previous implementation.
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.
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
focusedItem
to replace multiple state variables.renderHeader
function usinguseCallback
.onFocus
callback to reduce state updates.renderScrollableRow
andrenderItem
functions to prevent unnecessary recreations.onViewableItemsChanged
callback as it's no longer needed with the new focus handling approach.Implementation Details
headerImage
,headerTitle
,headerDescription
) with a singlefocusedItem
derived fromfocusedIndex
.renderHeader
to use the memoizedfocusedItem
.onFocus
to only updatefocusedIndex
.useCallback
torenderScrollableRow
andrenderItem
for better performance.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.