@umituz/react-native-design-system 4.27.16 → 4.27.17

package/src/molecules/filter-group/FilterGroup.tsx

@@ -1,11 +1,11 @@
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
 import { AtomicChip } from '../../atoms/chip/AtomicChip';
 import { useAppDesignTokens } from '../../theme';
 import type { FilterGroupProps } from './types';
 
-export function FilterGroup<T = string>({
+export const FilterGroup = React.memo(function FilterGroup<T = string>({
   items,
   selectedValue,
   onSelect,
@@ -29,6 +29,33 @@ export function FilterGroup<T = string>({
     },
   }), [tokens.spacing.md]);
 
+  // Memoize selected items to prevent unnecessary re-renders
+  const selectedSet = useMemo(() => {
+    if (multiSelect && Array.isArray(selectedValue)) {
+      return new Set(selectedValue);
+    }
+    return new Set(selectedValue !== undefined ? [selectedValue] : []);
+  }, [selectedValue, multiSelect]);
+
+  // Memoize isSelected calculation for each item
+  const isSelected = useCallback((value: any) => selectedSet.has(value), [selectedSet]);
+
+  // Memoized chip renderer
+  const renderChip = useCallback((item: any) => (
+    <AtomicChip
+      key={String(item.value)}
+      variant={isSelected(item.value) ? 'filled' : 'outlined'}
+      color={isSelected(item.value) ? 'primary' : 'secondary'}
+      selected={isSelected(item.value)}
+      onPress={() => onSelect(item.value)}
+      clickable
+      style={[styles.item, itemStyle]}
+      testID={item.testID}
+    >
+      {item.label}
+    </AtomicChip>
+  ), [isSelected, onSelect, styles.item, itemStyle]);
+
   return (
     <ScrollView
       horizontal
@@ -37,25 +64,7 @@ export function FilterGroup<T = string>({
       style={[styles.container, style]}
       contentContainerStyle={[styles.content, contentContainerStyle]}
     >
-      {items.map((item) => {
-        const isSelected = multiSelect
-          ? Array.isArray(selectedValue) && selectedValue.includes(item.value)
-          : item.value === selectedValue;
-        return (
-          <AtomicChip
-            key={`${item.value}`}
-            variant={isSelected ? 'filled' : 'outlined'}
-            color={isSelected ? 'primary' : 'secondary'}
-            selected={isSelected}
-            onPress={() => onSelect(item.value)}
-            clickable
-            style={[styles.item, itemStyle]}
-            testID={item.testID}
-          >
-            {item.label}
-          </AtomicChip>
-        );
-      })}
+      {items.map(renderChip)}
     </ScrollView>
   );
-}
+});

package/src/molecules/icon-grid/IconGrid.tsx

@@ -14,6 +14,7 @@ import {
   type LayoutChangeEvent,
   type StyleProp,
   type ViewStyle,
+  FlatList,
 } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import { AtomicIcon } from '../../atoms';
@@ -53,6 +54,8 @@ const GridItem = React.memo<{
   borderLight: string;
   textPrimary: string;
 }>(({ item, itemWidth, cardBackground, borderLight, textPrimary }) => {
+  const { onPress: handlePress } = item;
+
   const cardStyle = useMemo(
     () => [styles.card, { width: itemWidth }],
     [itemWidth]
@@ -74,7 +77,7 @@ const GridItem = React.memo<{
   return (
     <TouchableOpacity
       activeOpacity={0.7}
-      onPress={item.onPress}
+      onPress={handlePress}
       style={cardStyle}
     >
       <View style={iconBoxStyle}>
@@ -133,28 +136,57 @@ export const IconGrid = React.memo<IconGridProps>(({
     [gap, rowGap, style]
   );
 
-  const placeholderStyle = useMemo(
-    () => ({ width: 0, height: 0 }),
-    []
-  );
+  // Memoize color props to prevent unnecessary GridItem re-renders
+  const colorProps = useMemo(() => ({
+    cardBackground,
+    borderLight,
+    textPrimary,
+  }), [cardBackground, borderLight, textPrimary]);
+
+  // Stable renderItem with memoization
+  const renderItem = useCallback(({ item }: { item: IconGridItem }) => {
+    if (itemWidth === 0) {
+      return <View key={item.id} style={{ width: 0, height: 0 }} />;
+    }
+
+    return (
+      <GridItem
+        item={item}
+        itemWidth={itemWidth}
+        {...colorProps}
+      />
+    );
+  }, [itemWidth, colorProps]);
+
+  const keyExtractor = useCallback((item: IconGridItem) => item.id, []);
+
+  const getItemLayout = useCallback((_?: unknown, index?: number) => ({
+    length: itemWidth,
+    offset: itemWidth * (index || 0),
+    index: index || 0,
+  }), [itemWidth]);
+
+  if (itemWidth === 0) {
+    return (
+      <View style={gridStyle} onLayout={handleLayout}>
+        {items.map((item) => (
+          <View key={item.id} style={{ width: 0, height: 0 }} />
+        ))}
+      </View>
+    );
+  }
 
   return (
     <View style={gridStyle} onLayout={handleLayout}>
-      {items.map((item) =>
-        itemWidth > 0 ? (
-          <GridItem
-            key={item.id}
-            item={item}
-            itemWidth={itemWidth}
-            cardBackground={cardBackground}
-            borderLight={borderLight}
-            textPrimary={textPrimary}
-          />
-        ) : (
-          // Placeholder — keeps grid stable before first layout measurement
-          <View key={item.id} style={placeholderStyle} />
-        ),
-      )}
+      <FlatList
+        data={items}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        getItemLayout={getItemLayout}
+        numColumns={columns}
+        scrollEnabled={false}
+        contentContainerStyle={gridStyle}
+      />
     </View>
   );
 });

package/src/onboarding/presentation/components/BackgroundImageCollage.tsx

@@ -4,7 +4,7 @@
  * Uses expo-image when available, falls back to React Native Image.
  */
 
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { View, Image as RNImage, StyleSheet, type ImageURISource, type ImageStyle } from "react-native";
 import { useSafeAreaInsets } from "../../../safe-area/hooks/useSafeAreaInsets";
 import {
@@ -59,7 +59,7 @@ const LAYOUT_GENERATORS: Record<CollageLayout, LayoutGenerator> = {
   honeycomb: generateHoneycombLayout,
 };
 
-export const BackgroundImageCollage: React.FC<BackgroundImageCollageProps> = ({
+export const BackgroundImageCollage: React.FC<BackgroundImageCollageProps> = React.memo(({
   images,
   layout = "grid",
   columns,
@@ -75,30 +75,39 @@ export const BackgroundImageCollage: React.FC<BackgroundImageCollageProps> = ({
     return generator(images, { columns, gap, borderRadius, safeAreaInsets: insets });
   }, [images, layout, columns, gap, borderRadius, insets]);
 
+  // Stable key extractor - must be before early return
+  const keyExtractor = useCallback((item: ImageLayoutItem) => {
+    return typeof item.source === 'string' ? item.source : String(item.source);
+  }, []);
+
   if (imageLayouts.length === 0) return null;
 
+  // Memoized image component to prevent unnecessary re-renders
+  const CollageImage = React.memo<{ item: ImageLayoutItem }>(({ item }) => {
+    if (ExpoImage) {
+      return (
+        <ExpoImage
+          source={item.source}
+          style={item.style}
+          contentFit="cover"
+        />
+      );
+    }
+    return (
+      <RNImage
+        source={item.source as ImageURISource | number}
+        style={item.style as ImageStyle}
+        resizeMode="cover"
+      />
+    );
+  });
+  CollageImage.displayName = 'CollageImage';
+
   return (
     <View style={[StyleSheet.absoluteFill, { opacity }]} pointerEvents="none">
-      {imageLayouts.map((item) => {
-        if (ExpoImage) {
-          return (
-            <ExpoImage
-              key={String(item.source)}
-              source={item.source}
-              style={item.style}
-              contentFit="cover"
-            />
-          );
-        }
-        return (
-          <RNImage
-            key={String(item.source)}
-            source={item.source as ImageURISource | number}
-            style={item.style as ImageStyle}
-            resizeMode="cover"
-          />
-        );
-      })}
+      {imageLayouts.map((item) => (
+        <CollageImage key={keyExtractor(item)} item={item} />
+      ))}
     </View>
   );
-};
+});