Reactアプリケーションのパフォーマンス最適化

Reactアプリケーションのパフォーマンス最適化

Reactアプリケーションのパフォーマンス向上は、ユーザー体験の改善に直結します。効果的な最適化手法を解説します。

レンダリング最適化

React.memo の活用

const ExpensiveComponent = React.memo(({ data }) => {
    return (
        <div>
            {data.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
});

useMemo と useCallback

const MyComponent = ({ items, onItemClick }) => {
    const expensiveValue = useMemo(() => {
        return items.reduce((sum, item) => sum + item.value, 0);
    }, [items]);

    const memoizedCallback = useCallback((id) => {
        onItemClick(id);
    }, [onItemClick]);

    return <ExpensiveChild value={expensiveValue} onClick={memoizedCallback} />;
};

バンドルサイズ最適化

コード分割

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

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

Tree Shaking

  • 未使用コードの自動削除
  • ES6 modulesの活用
  • 適切なimport文の記述

これらの手法により、Reactアプリケーションの応答性を大幅に改善できます。