background

Performance optimization was one of the first challenges I tackled when working at Dentira. Our application was showing signs of slowdown, especially during complex interactions. Through profiling and strategic refactoring, we significantly improved the application's speed and responsiveness.

The Starting Point

When we started profiling our React application, we found several performance bottlenecks:

Slow re-renders in list components
Unnecessary computations on every render
Large component trees causing cascading updates
Memory leaks from unmounted components

Memoization Strategies

1. React.memo for Component Memoization

Not every component needs to re-render when parent state changes. Use React.memo to prevent unnecessary re-renders:

const ExpensiveComponent = React.memo(({ data, onAction }) => {
  // Expensive rendering logic
}, (prevProps, nextProps) => {
  // Custom comparison function
  return prevProps.data.id === nextProps.data.id;
});

2. useMemo for Expensive Calculations

For expensive computations, useMemo prevents recalculation on every render:

const filteredProducts = useMemo(() => {
  return products.filter(product => {
    // Expensive filtering logic
    return matchesCriteria(product);
  });
}, [products, filterCriteria]);

3. useCallback for Function Stability

Passing new function references can cause child components to re-render. Use useCallback to maintain function stability:

const handleClick = useCallback((id: string) => {
  // Handler logic
}, [dependencies]);

Component Profiling

Before optimizing, you need to identify the bottlenecks:

import { Profiler } from 'react';

function onRenderCallback(id, phase, actualDuration) {
  console.log('Component:', id);
  console.log('Phase:', phase);
  console.log('Duration:', actualDuration);
}

<Profiler id="ProductList" onRender={onRenderCallback}>
  <ProductList products={products} />
</Profiler>

React DevTools Profiler is also invaluable for identifying slow components.

Refactoring Strategies

Migrating from Class to Functional Components

We migrated our entire codebase from class components to functional components. This brought several benefits:

Better Performance: Functional components with hooks are generally more efficient
Easier Testing: Functional components are simpler to test
Better Code Organization: Custom hooks allow for better logic separation
Tree Shaking: Better dead code elimination

Code Splitting

Implement route-based code splitting to reduce initial bundle size:

const ProductPage = lazy(() => import('./pages/ProductPage'));

<Suspense fallback={<Loading />}>
  <ProductPage />
</Suspense>

Real-World Results

After implementing these optimizations at Dentira:

Login time reduced by 40%
Cart processing time improved by 35%
Overall application responsiveness increased significantly
User satisfaction metrics improved

Best Practices

Measure First: Always profile before optimizing
Optimize Judiciously: Not everything needs to be memoized
Monitor in Production: Use tools like React DevTools Profiler in production
Consider User Experience: Sometimes a loading state is better than a slow render

Performance optimization is an ongoing process. Regular profiling and monitoring help catch performance regressions early. The key is to find the right balance between optimization and code maintainability.

React Performance Optimization - Memoization and Beyond

March 20, 2024