memoize style

gallery-so · Apr 23, 2024 · d79bee3 · d79bee3
1 parent 2b7b511
commit d79bee3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 22 deletions.
diff --git a/apps/mobile/src/components/GalleryEditor/SortableRow.tsx b/apps/mobile/src/components/GalleryEditor/SortableRow.tsx
@@ -1,5 +1,5 @@
 import { FlashList } from '@shopify/flash-list';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { trigger } from 'react-native-haptic-feedback';
@@ -256,18 +256,18 @@ export function SortableRow({
     };
   }, []);
 
+  const animatedViewStyle = useMemo(() => {
+    return [
+      rStyle,
+      {
+        height: itemHeight,
+      },
+    ];
+  }, [itemHeight, rStyle]);
+
   return (
     <GestureDetector gesture={panGesture}>
-      <Animated.View
-        style={[
-          rStyle,
-          {
-            height: itemHeight,
-          },
-        ]}
-      >
-        {children}
-      </Animated.View>
+      <Animated.View style={animatedViewStyle}>{children}</Animated.View>
     </GestureDetector>
   );
 }
diff --git a/apps/mobile/src/components/GalleryEditor/SortableRowList.tsx b/apps/mobile/src/components/GalleryEditor/SortableRowList.tsx
@@ -72,18 +72,17 @@ export function SortableRowList({
     return rowOffsets.reduce((totalHeight, row) => totalHeight + row.height, 0);
   }, [rowOffsets]);
 
+  const style = useMemo(() => {
+    return {
+      top: 0,
+      left: 0,
+      right: 0,
+      height: containerHeight,
+    };
+  }, [containerHeight]);
+
   return (
-    <View
-      className="relative"
-      style={[
-        {
-          height: containerHeight,
-          top: 0,
-          left: 0,
-          right: 0,
-        },
-      ]}
-    >
+    <View className="relative" style={style}>
       {rows.map((row, index) => {
         return (
           <SortableRow