Performance Optimization

Code

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

// 1. memo to avoid unnecessary re-renders
const ExpensiveItem = memo(function Item({ data }) {
    console.log('Item render');
    return <div>{data.name}</div>;
});

// 2. useMemo to memoize computation
function FilteredList({ items, filter }) {
    const filtered = useMemo(
        () => items.filter(i => i.type === filter),
        [items, filter]
    );
    return filtered.map(i => <div key={i.id}>{i.name}</div>);
}

// 3. useCallback to memoize callbacks
function Parent() {
    const [count, setCount] = useState(0);
    const handleClick = useCallback(() => {
        setCount(c => c + 1);
    }, []);
    return <MemoButton onClick={handleClick} />;
}

// 4. Virtual list
import { FixedSizeList } from 'react-window';
function BigList({ items }) {
    const Row = ({ index, style }) => (
        <div style={style}>{items[index].name}</div>
    );
    return (
        <FixedSizeList height={400} width={300} itemCount={items.length} itemSize={35}>
            {Row}
        </FixedSizeList>
    );
}

// 5. Lazy loading
const LazyChart = lazy(() => import('./Chart'));

// 6. Key optimization
function List({ items }) {
    // Use stable unique keys, not index
    return items.map(item => <Item key={item.id} data={item} />);
}

// 7. State splitting
function Form() {
    // Split independent state, reduce re-render scope
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    return <input value={name} onChange={e => setName(e.target.value)} />;
}

// 8. useDeferredValue deferred update
function Search({ query }) {
    const deferredQuery = useDeferredValue(query);
    const results = useMemo(() => search(deferredQuery), [deferredQuery]);
    return <Results results={results} />;
}

Explanation

React performance optimization: memo, useMemo, useCallback, virtual lists, lazy loading, stable keys, state splitting.

More React Snippets