Performance Optimization with React.memo and useMemo

Common Performance Patterns

1. Memoizing Expensive Filters

function ProductList({ products, filters }) {
  // Memoize filtered products
  const filteredProducts = useMemo(() => {
    return products.filter(product => {
      // Price filter
      if (filters.minPrice && product.price < filters.minPrice) return false;
      if (filters.maxPrice && product.price > filters.maxPrice) return false;
      
      // Category filter
      if (filters.category && product.category !== filters.category) return false;
      
      // Search filter
      if (filters.search) {
        const searchLower = filters.search.toLowerCase();
        const inName = product.name.toLowerCase().includes(searchLower);
        const inDescription = product.description.toLowerCase().includes(searchLower);
        if (!inName && !inDescription) return false;
      }
      
      // Rating filter
      if (filters.minRating && product.rating < filters.minRating) return false;
      
      return true;
    });
  }, [products, filters]);
  
  // Memoize sorted products
  const sortedProducts = useMemo(() => {
    const sorted = [...filteredProducts];
    
    switch (filters.sortBy) {
      case 'price-low':
        return sorted.sort((a, b) => a.price - b.price);
      case 'price-high':
        return sorted.sort((a, b) => b.price - a.price);
      case 'rating':
        return sorted.sort((a, b) => b.rating - a.rating);
      case 'name':
        return sorted.sort((a, b) => a.name.localeCompare(b.name));
      default:
        return sorted;
    }
  }, [filteredProducts, filters.sortBy]);
  
  // Memoize pagination
  const paginatedProducts = useMemo(() => {
    const start = (filters.page - 1) * filters.perPage;
    const end = start + filters.perPage;
    return sortedProducts.slice(start, end);
  }, [sortedProducts, filters.page, filters.perPage]);
  
  return (
    <div>
      <div>Showing {filteredProducts.length} products</div>
      <ProductGrid products={paginatedProducts} />
      <Pagination 
        total={filteredProducts.length}
        perPage={filters.perPage}
        currentPage={filters.page}
      />
    </div>
  );
}

2. Memoizing Context Values

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const [accentColor, setAccentColor] = useState('#007bff');
  
  // Without memoization: creates new object every render
  // This causes all consumers to re-render
  const badContextValue = {
    theme,
    accentColor,
    setTheme,
    setAccentColor,
    toggleTheme: () => setTheme(t => t === 'light' ? 'dark' : 'light')
  };
  
  // With memoization: only updates when dependencies change
  const contextValue = useMemo(() => ({
    theme,
    accentColor,
    setTheme,
    setAccentColor,
    toggleTheme: () => setTheme(t => t === 'light' ? 'dark' : 'light')
  }), [theme, accentColor]);
  
  return (
    <ThemeContext.Provider value={contextValue}>
      {children}
    </ThemeContext.Provider>
  );
}

// Advanced: Split context for better performance
function AppProviders({ children }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  const [language, setLanguage] = useState('en');
  
  // Separate contexts for different concerns
  const authValue = useMemo(() => ({ user, setUser }), [user]);
  const themeValue = useMemo(() => ({ theme, setTheme }), [theme]);
  const i18nValue = useMemo(() => ({ language, setLanguage }), [language]);
  
  return (
    <AuthContext.Provider value={authValue}>
      <ThemeContext.Provider value={themeValue}>
        <I18nContext.Provider value={i18nValue}>
          {children}
        </I18nContext.Provider>
      </ThemeContext.Provider>
    </AuthContext.Provider>
  );
}

3. Memoizing Heavy Computations

function ChartComponent({ data, config }) {
  // Expensive data processing for visualization
  const chartData = useMemo(() => {
    console.log('Processing chart data...');
    
    // Step 1: Clean and validate data
    const cleanedData = data.filter(item => 
      item.value !== null && !isNaN(item.value)
    );
    
    // Step 2: Calculate aggregates
    const aggregates = cleanedData.reduce((acc, item) => {
      const key = item[config.groupBy];
      if (!acc[key]) {
        acc[key] = { sum: 0, count: 0, values: [] };
      }
      acc[key].sum += item.value;
      acc[key].count += 1;
      acc[key].values.push(item.value);
      return acc;
    }, {});
    
    // Step 3: Calculate statistics for each group
    const statistics = Object.entries(aggregates).map(([key, group]) => ({
      key,
      average: group.sum / group.count,
      median: calculateMedian(group.values),
      min: Math.min(...group.values),
      max: Math.max(...group.values),
      count: group.count
    }));
    
    // Step 4: Format for chart library
    return {
      labels: statistics.map(stat => stat.key),
      datasets: [{
        label: 'Average',
        data: statistics.map(stat => stat.average)
      }, {
        label: 'Median',
        data: statistics.map(stat => stat.median)
      }],
      metadata: statistics
    };
  }, [data, config.groupBy]);
  
  // Memoize chart options
  const chartOptions = useMemo(() => ({
    responsive: true,
    plugins: {
      legend: {
        position: config.legendPosition || 'top',
      },
      title: {
        display: true,
        text: config.title || 'Data Visualization'
      }
    },
    scales: {
      y: {
        beginAtZero: config.beginAtZero !== false
      }
    }
  }), [config]);
  
  return (
    <div className="chart-container">
      <Chart 
        type={config.chartType || 'bar'}
        data={chartData}
        options={chartOptions}
      />
      <DataSummary statistics={chartData.metadata} />
    </div>
  );
}