react-best-practices は何をしますか？
Mastra エンジニアリングによる React パフォーマンス最適化ガイドライン。このスキルは、React コンポーネント、データフェッチ、バンドル最適化、またはパフォーマンス改善に関するタスクで使用されます。
はじめに
このスキルは、React アプリケーションのパフォーマンスを向上させるための実践的なアドバイスを提供します。コンポーネントのメモ化、効率的なデータフェッチ、バンドル最適化、状態管理の改善など、主要な最適化パターンをカバーします。
使い方
- React コンポーネントの記述時:
useMemo、useCallback、React.memoを使用して不要な再レンダリングを防止します。 - データフェッチの実装時: サスペンス、React Query、または SWR を使用して効率的なデータローディングを実現します。
- バンドル最適化時: コード分割と動的インポートを活用して初期ロード時間を短縮します。
- パフォーマンス改善時: プロファイリングツールを使用してボトルネックを特定し、適切な最適化を施します。
ベストプラクティス
コンポーネントのメモ化
- コンポーネントを
React.memoでラップして、プロパティが変更された場合のみ再レンダリングします。 - コールバック関数には
useCallbackを使用します。 - 高コストな計算結果には
useMemoを使用します。
データフェッチ
- データフェッチにはサスペンスとストリーミングを活用します。
- クライアントサイドのフェッチには React Query または SWR を使用します。
- 不要なネットワークリクエストを避けるためにキャッシュを適切に設定します。
バンドル最適化
React.lazyとSuspenseを使用してコード分割を実装します。- 大きな依存関係は動的インポートで遅延ロードします。
- ツリーシェイキングを有効にして未使用コードを削除します。
状態管理
- 状態をできるだけ局所化します。
- Context の過剰使用を避け、必要に応じて分割します。
- 不変更新を保証してレンダリングを最適化します。
適用例
// メモ化の例
const MyComponent = React.memo(({ data }) => {
return <div>{data.text}</div>;
});
const Parent = () => {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(prev => prev + 1);
}, []);
return <MyComponent data={{ text: count }} />;
};