React Performance Optimization - Complete Guide

React performance optimization is essential for building fast, responsive applications. This guide covers all major optimization techniques from basic memoization to advanced patterns.

Introduction to React Performance

Performance optimization ensures your React applications are fast and responsive. Key areas:

Performance Metrics:

• Initial load time
• Time to interactive
• Bundle size
• Render performance
• Memory usage

Common Issues:

• Unnecessary re-renders
• Large bundle sizes
• Slow initial load
• Memory leaks
• Inefficient updates

Memoization Techniques

React.memo

Prevent unnecessary re-renders:

const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
    return <div>{/* Expensive rendering */}</div>;
});

useMemo Hook

Memoize expensive calculations:

function Component({ items }) {
    const sortedItems = useMemo(() => {
        return items.sort((a, b) => a.value - b.value);
    }, [items]);
    
    return <div>{sortedItems.map(item => <Item key={item.id} data={item} />)}</div>;
}

useCallback Hook

Memoize function references:

function Parent({ items }) {
    const handleClick = useCallback((id) => {
        console.log('Clicked:', id);
    }, []);
    
    return <Child items={items} onClick={handleClick} />;
}

Code Splitting and Lazy Loading

React.lazy

Lazy load components:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <LazyComponent />
        </Suspense>
    );
}

Route-based Splitting

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

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

function App() {
    return (
        <BrowserRouter>
            <Suspense fallback={<div>Loading...</div>}>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/about" element={<About />} />
                </Routes>
            </Suspense>
        </BrowserRouter>
    );
}

Virtualization

React Window

For long lists:

npm install react-window

import { FixedSizeList } from 'react-window';

function VirtualizedList({ items }) {
    return (
        <FixedSizeList
            height={600}
            itemCount={items.length}
            itemSize={50}
            width="100%"
        >
            {({ index, style }) => (
                <div style={style}>
                    {items[index].name}
                </div>
            )}
        </FixedSizeList>
    );
}

Rendering Optimization

Avoid Inline Objects

// Bad
<Component style={{ margin: 10 }} />

// Good
const style = { margin: 10 };
<Component style={style} />

Key Optimization

Use stable, unique keys:

// Bad
{items.map((item, index) => <Item key={index} />)}

// Good
{items.map((item) => <Item key={item.id} />)}

Bundle Optimization

Tree Shaking

Ensure proper ES module imports:

// Bad
import _ from 'lodash';

// Good
import debounce from 'lodash/debounce';

Analyze Bundle

npm install --save-dev webpack-bundle-analyzer

Conclusion

React performance optimization requires:

• Proper memoization
• Code splitting
• Virtualization for lists
• Optimized rendering
• Bundle size management

Key principles:

• Measure before optimizing
• Use React DevTools Profiler
• Optimize bottlenecks first
• Balance complexity vs performance

Following these patterns creates fast, responsive React applications.