Performance Best Practices

import React from 'react';
import { FixedSizeList as List } from 'react-window';

// Virtualized list for large datasets
function VirtualizedList({ items }) {
    const Row = ({ index, style }) => (
        <div style={style}>
            <div className="row">
                <span>{items[index].name}</span>
                <span>{items[index].email}</span>
            </div>
        </div>
    );

    return (
        <List
            height={400}
            itemCount={items.length}
            itemSize={50}
            width="100%"
        >
            {Row}
        </List>
    );
}

// Web Worker for heavy computations
// worker.js
self.onmessage = function(e) {
    const { data, type } = e.data;
    
    if (type === 'HEAVY_CALCULATION') {
        const result = performHeavyCalculation(data);
        self.postMessage({ type: 'RESULT', result });
    }
};

function performHeavyCalculation(data) {
    // Simulate heavy computation
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
        result += Math.sqrt(i);
    }
    return result;
}

// Using web worker in React
function HeavyCalculationComponent() {
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);

    const performCalculation = useCallback((data) => {
        setLoading(true);
        
        const worker = new Worker('/worker.js');
        
        worker.onmessage = function(e) {
            if (e.data.type === 'RESULT') {
                setResult(e.data.result);
                setLoading(false);
            }
        };
        
        worker.postMessage({ data, type: 'HEAVY_CALCULATION' });
    }, []);

    return (
        <div>
            <button onClick={() => performCalculation([1, 2, 3, 4, 5])}>
                Start Heavy Calculation
            </button>
            {loading && <p>Calculating...</p>}
            {result && <p>Result: {result}</p>}
        </div>
    );
}

// Error Boundary Component
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false, error: null };
    }

    static getDerivedStateFromError(error) {
        return { hasError: true, error };
    }

    componentDidCatch(error, errorInfo) {
        // Log error to service
        logErrorToService(error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            return (
                <div className="error-boundary">
                    <h2>Something went wrong.</h2>
                    <button onClick={() => this.setState({ hasError: false })}>
                        Try again
                    </button>
                </div>
            );
        }

        return this.props.children;
    }
}

// Using Error Boundaries
function App() {
    return (
        <ErrorBoundary>
            <Header />
            <ErrorBoundary>
                <MainContent />
            </ErrorBoundary>
            <Footer />
        </ErrorBoundary>
    );
}