fix(gameMode): memoize carousel items to avoid re-render (#322)

caxewsh · Nov 8, 2024 · 22f2473 · 22f2473
2 parents 04c7de9 + 4ec67ab
commit 22f2473
Showing 1 changed file with 29 additions and 23 deletions.
diff --git a/components/modescreen/GameModeCarousel.jsx b/components/modescreen/GameModeCarousel.jsx
@@ -3,6 +3,33 @@ import { View, Text, TouchableOpacity, Image } from "react-native";
 import Carousel from "react-native-snap-carousel";
 import { useNavigation } from "@react-navigation/native";
 
+// Memoized functional component for each item
+const CarouselItem = React.memo(({ item, navigation }) => (
+    <View className="bg-white rounded-lg shadow-md overflow-hidden opacity-100 disabled:opacity-50">
+        <Image
+            source={item.image}
+            className="w-full h-40"
+            resizeMode="cover"
+        />
+        <View className="p-4">
+            <Text className="text-cyan-900 text-center font-bold text-lg mb-2">
+                {item.title}
+            </Text>
+            <TouchableOpacity
+                onPress={() => item.available && navigation.navigate("Lobby")}
+                className={`py-2 px-4 rounded-full ${
+                    item.available ? 'bg-cyan-700' : 'bg-gray-400'
+                }`}
+                disabled={!item.available}
+            >
+                <Text className="text-white text-center">
+                    {item.available ? 'Choisir' : 'Indisponible'}
+                </Text>
+            </TouchableOpacity>
+        </View>
+    </View>
+));
+
 const GameModeCarousel = () => {
     const navigation = useNavigation();
 
@@ -28,29 +55,7 @@ const GameModeCarousel = () => {
     ];
 
     const renderItem = ({ item }) => (
-        <View className="bg-white rounded-lg shadow-md overflow-hidden opacity-100 disabled:opacity-50">
-            <Image
-                source={item.image}
-                className="w-full h-40"
-                resizeMode="cover"
-            />
-            <View className="p-4">
-                <Text className="text-cyan-900 text-center font-bold text-lg mb-2">
-                    {item.title}
-                </Text>
-                <TouchableOpacity
-                    onPress={() => item.available && navigation.navigate("Lobby")}
-                    className={`py-2 px-4 rounded-full ${
-                        item.available ? 'bg-cyan-700' : 'bg-gray-400'
-                    }`}
-                    disabled={!item.available}
-                >
-                    <Text className="text-white text-center">
-                        {item.available ? 'Choisir' : 'Indisponible'}
-                    </Text>
-                </TouchableOpacity>
-            </View>
-        </View>
+        <CarouselItem item={item} navigation={navigation} />
     );
 
     return (
@@ -63,6 +68,7 @@ const GameModeCarousel = () => {
                 loop
                 autoplay
                 autoplayInterval={5000}
+                initialNumToRender={3} // Adjust for better performance
             />
         </View>
     );