react-performance-optimization は何をしますか？
Reactパフォーマンス最適化パターン集：メモ化、コード分割、効率的なレンダリング戦略を使用。遅いReactアプリケーションの最適化、バンドルサイズの削減、大規模データセットでのユーザーエクスペリエンス向上に活用します。
概要
このスキルは、Reactアプリケーションのパフォーマンスを向上させるための実践的なパターンを提供します。メモ化（useMemo、useCallback）、コード分割（React.lazy、Suspense）、効率的なレンダリング戦略（仮想化、不必要な再レンダリングの防止）を中心に、具体的な導入手順とベストプラクティスを紹介します。
主な機能
- メモ化:
useMemoとuseCallbackを使用して、コンポーネントの再レンダリングを最適化します。 - コード分割:
React.lazyとSuspenseを使用して、バンドルサイズを動的に削減します。 - 効率的なレンダリング: 仮想化や不必要な再レンダリングの防止により、大規模データセットでもスムーズなユーザーエクスペリエンスを実現します。
サポート対象プラットフォーム
- Claude Code
- Cursor
- Codex
- その他のAIエージェント
使用方法
- スキルをAIエージェントにインポートします。
- 最適化が必要なReactコンポーネントを指定します。
- スキルが提案するパターンに従って、コードをリファクタリングします。
例
import React, { useMemo } from 'react';
function ExpensiveComponent({ data }) {
const processedData = useMemo(() => {
return data.map(item => heavyComputation(item));
}, [data]);
return <div>{processedData}</div>;
}
注意点
- メモ化は過度に使用せず、実際のパフォーマンス測定に基づいて適用してください。
- コード分割はルートレベルで行うことを推奨します。
- 大規模データセットでは、仮想化ライブラリ（例：
react-window）の使用を検討してください。
貢献
このスキルはオープンソースです。改善提案やバグ報告は、GitHubリポジトリのIssueまたはPull Requestを通じて行ってください。