React — Performance

React.memo

const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
    console.log('Rendering ExpensiveComponent');
    return <div>{data}</div>;
});

useMemo

function ExpensiveCalculation({ items }) {
    const sortedItems = useMemo(() => {
        return items.sort((a, b) => a - b);
    }, [items]);

    return (
        <ul>
            {sortedItems.map(item => (
                <li key={item}>{item}</li>
            ))}
        </ul>
    );
}

useCallback

function Parent() {
    const [count, setCount] = useState(0);

    const handleClick = useCallback(() => {
        console.log('Clicked');
    }, []);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(c => c + 1)}>Increment</button>
            <ExpensiveChild onClick={handleClick} />
        </div>
    );
}

Lazy Loading

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

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

Performance Examples

// Virtualized list
import { FixedSizeList } from 'react-window';

function VirtualizedList({ items }) {
    const Row = ({ index, style }) => (
        <div style={style}>
            {items[index]}
        </div>
    );

    return (
        <FixedSizeList
            height={400}
            itemCount={items.length}
            itemSize={35}
            width={300}
        >
            {Row}
        </FixedSizeList>
    );
}

// Debounced search
function SearchInput({ onSearch }) {
    const [query, setQuery] = useState('');

    const debouncedSearch = useCallback(
        debounce((value) => {
            onSearch(value);
        }, 300),
        [onSearch]
    );

    const handleChange = (e) => {
        const value = e.target.value;
        setQuery(value);
        debouncedSearch(value);
    };

    return (
        <input
            value={query}
            onChange={handleChange}
            placeholder="Search..."
        />
    );
}

// Code splitting
const Dashboard = React.lazy(() => import('./pages/Dashboard'));
const Settings = React.lazy(() => import('./pages/Settings'));

function App() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <Routes>
                <Route path="/dashboard" element={<Dashboard />} />
                <Route path="/settings" element={<Settings />} />
            </Routes>
        </Suspense>
    );
}

Performance Checklist

1. Use React.memo for expensive components
2. Use useMemo for expensive calculations
3. Use useCallback for functions passed as props
4. Implement code splitting with React.lazy
5. Use virtualization for long lists
6. Debounce expensive operations
7. Avoid unnecessary re-renders

Mini Practice

Write React code that:

1. Uses React.memo
2. Implements useMemo
3. Uses useCallback
4. Adds code splitting

Up Next

Next: Learn about Testing.