@umituz/react-native-design-system 4.27.2 → 4.27.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.27.2",
+  "version": "4.27.3",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities - TanStack persistence and expo-image-manipulator now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/atoms/card/AtomicCard.tsx

@@ -182,13 +182,13 @@ const AtomicCardComponent: React.FC<AtomicCardProps> = ({
 
   const paddingValue = getCardPadding(padding, tokens);
 
-  const containerStyle = [
+  const containerStyle = useMemo(() => [
     cardStyles.container,
     { borderRadius: tokens.borders.radius.lg },
     variantStyles.container,
     selected && { borderColor: tokens.colors.primary, borderWidth: 2 },
     style,
-  ];
+  ], [tokens.borders.radius.lg, variantStyles.container, selected, tokens.colors.primary, style]);
 
   const handlePress = (event: GestureResponderEvent) => {
     if (!disabled && onPress) {

package/src/molecules/SearchBar/SearchBar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
     View,
     TextInput,
@@ -28,6 +28,9 @@ export const SearchBar: React.FC<SearchBarProps> = ({
     const searchIcon = useIconName('search');
     const closeCircleIcon = useIconName('closeCircle');
 
+    // Memoize hitSlop to prevent object creation on every render
+    const hitSlop = useMemo(() => ({ top: 10, bottom: 10, left: 10, right: 10 }), []);
+
     const handleClear = useCallback(() => {
         onChangeText('');
         onClear?.();
@@ -94,7 +97,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
                         <TouchableOpacity
                             onPress={handleClear}
                             style={styles.clearButton}
-                            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                            hitSlop={hitSlop}
                             accessibilityRole="button"
                             accessibilityLabel="Clear search"
                         >

package/src/molecules/calendar/infrastructure/services/CalendarService.ts

@@ -21,6 +21,9 @@ import { DateUtilities } from '../utils/DateUtilities';
  * Follows SOLID principles with composition over inheritance.
  */
 export class CalendarService {
+  // Cache for weekday names to prevent recalculation
+  private static weekdayNamesCache = new Map<string, string[]>();
+
   /**
    * Generate calendar days for a specific month
    */
@@ -96,13 +99,23 @@ export class CalendarService {
   /**
    * Get weekday names
    */
-  static getWeekdayNames(locale?: string): string[] {
+  static getWeekdayNames(locale: string = 'en-US'): string[] {
+    const cacheKey = locale;
+
+    // Return cached result if available
+    if (this.weekdayNamesCache.has(cacheKey)) {
+      return this.weekdayNamesCache.get(cacheKey)!;
+    }
+
+    // Calculate and cache
     const weekdays: string[] = [];
     for (let i = 0; i < 7; i++) {
       const date = new Date();
       date.setDate(date.getDate() - date.getDay() + i);
-      weekdays.push(date.toLocaleDateString(locale ?? undefined, { weekday: 'short' }));
+      weekdays.push(date.toLocaleDateString(locale, { weekday: 'short' }));
     }
+
+    this.weekdayNamesCache.set(cacheKey, weekdays);
     return weekdays;
   }
 

package/src/tanstack/infrastructure/monitoring/DevMonitor.ts

@@ -18,6 +18,7 @@ class DevMonitorClass {
   private statsInterval: ReturnType<typeof setInterval> | null = null;
   private cacheSubscription: (() => void) | null = null;
   private isEnabled: boolean;
+  private maxMetrics: number = 1000; // Prevent unbounded growth
 
   constructor(options: DevMonitorOptions = {}) {
     this.isEnabled = __DEV__ ?? false;
@@ -53,6 +54,14 @@ class DevMonitorClass {
 
     this.metrics.set(queryKeyString, updatedMetrics);
 
+    // Prevent unbounded growth - remove oldest metric if limit exceeded
+    if (this.metrics.size > this.maxMetrics) {
+      const oldestKey = this.metrics.keys().next().value;
+      if (oldestKey) {
+        this.metrics.delete(oldestKey);
+      }
+    }
+
     if (this.options.enableLogging && updatedMetrics.slowFetchCount > 0) {
       const fetchTime = MetricsCalculator.calculateFetchTime(query);
       if (MetricsCalculator.isSlowQuery(fetchTime, this.options.slowQueryThreshold)) {
@@ -177,6 +186,7 @@ class DevMonitorClass {
   clear(): void {
     if (!this.isEnabled) return;
     this.metrics.clear();
+    this.stopStatsLogging();
     if (this.options.enableLogging) {
       DevMonitorLogger.logMethodsCleared();
     }

package/src/utils/hooks/useAsyncOperation.ts

@@ -79,12 +79,14 @@ export function useAsyncOperation<T, E = Error>(
   const operationRef = useRef(operation);
   const errorHandlerRef = useRef(errorHandler);
 
-  // Keep all callback refs in sync with latest values
-  onSuccessRef.current = onSuccess;
-  onErrorRef.current = onError;
-  onFinallyRef.current = onFinally;
-  operationRef.current = operation;
-  errorHandlerRef.current = errorHandler;
+  // Keep all callback refs in sync with latest values - use useEffect to prevent updates on every render
+  useEffect(() => {
+    onSuccessRef.current = onSuccess;
+    onErrorRef.current = onError;
+    onFinallyRef.current = onFinally;
+    operationRef.current = operation;
+    errorHandlerRef.current = errorHandler;
+  }, [onSuccess, onError, onFinally, operation, errorHandler]);
 
   // Cleanup on unmount
   useEffect(() => {