performance

Performance Optimization Standards

Implement performance-first development practices with systematic optimization strategies, efficient algorithms, and comprehensive monitoring. This rule ensures all code follows performance best practices from the ground up.

Performance Analysis Methodology

Before implementing any feature, I will:

1. Baseline Measurement: Establish current performance metrics before changes
2. Bottleneck Identification: Use profiling tools to identify actual performance constraints
3. Impact Assessment: Evaluate the performance impact of proposed changes
4. Optimization Strategy: Choose appropriate optimization techniques based on analysis
5. Validation: Measure improvements after implementation

Core Performance Implementation Patterns

1. React Component Optimization Template

Use this pattern for all React components:

import { memo, useMemo, useCallback, useState, useEffect } from 'react';

interface OptimizedComponentProps {
  items: Array<{ id: string; name: string; score: number }>;
  filters: FilterOptions;
  onItemSelect: (id: string) => void;
  onBulkAction: (ids: string[]) => void;
}

export const OptimizedComponent = memo<OptimizedComponentProps>(({ 
  items, 
  filters, 
  onItemSelect, 
  onBulkAction 
}) => {
  // Memoize expensive computations
  const processedItems = useMemo(() => {
    return items
      .filter(item => matchesFilters(item, filters))
      .sort((a, b) => b.score - a.score)
      .slice(0, 100); // Limit initial render
  }, [items, filters]);

  // Memoize event handlers to prevent child re-renders
  const handleItemSelect = useCallback(
    (id: string) => () => onItemSelect(id),
    [onItemSelect]
  );

  const handleBulkSelect = useCallback(
    (selectedIds: string[]) => {
      onBulkAction(selectedIds);
    },
    [onBulkAction]
  );

  // Virtualization for large lists
  const [visibleRange, setVisibleRange] = useState({ start: 0, end: 50 });

  return (
    <VirtualizedContainer
      itemCount={processedItems.length}
      onRangeChange={setVisibleRange}
    >
      {processedItems.slice(visibleRange.start, visibleRange.end).map(item => (
        <MemoizedListItem
          key={item.id}
          item={item}
          onSelect={handleItemSelect(item.id)}
        />
      ))}
    </VirtualizedContainer>
  );
}, (prevProps, nextProps) => {
  // Custom comparison for complex props
  return (
    prevProps.items.length === nextProps.items.length &&
    shallowEqual(prevProps.filters, nextProps.filters)
  );
});

// Memoized child component
const MemoizedListItem = memo<{
  item: ListItem;
  onSelect: () => void;
}>(({ item, onSelect }) => (
  <div onClick={onSelect} className="list-item">
    <span>{item.name}</span>
    <span className="score">{item.score}</span>
  </div>
));