react-best-practices

React ベストプラクティス

googleadsagent.ai™ による Agent Skills™ の一部です。

説明

React Best Practices では、クリティカル（ウォーターフォールの排除、バンドルサイズの削減）から低〜中程度（JavaScript のマイクロ最適化）まで、8 つの優先度カテゴリにわたる 40 以上のルールを体系化しています。各ルールは実行可能な内容で、重要度の評価とコードの修正前後の例を含みます。エージェントは React コードの作成時やレビュー時に、これらのルールを自動的に適用します。

ルールは実装の容易さではなく、影響度の順に並んでいます。クライアントとサーバー間のウォーターフォールを排除し、バンドルサイズを削減することが、最も大きなパフォーマンス向上につながるため、クリティカルに分類されています。次に、サーバーサイドレンダリングのパフォーマンスと、クライアントでのデータフェッチパターンが続きます。開発者が真っ先に取り組みがちな再レンダリングの最適化は、ネットワークやバンドルの問題と比べてユーザーが体感するパフォーマンスに測定可能な問題を引き起こすことはまれなため、中程度に分類されています。

このスキルでは、React のパフォーマンスをコンポーネントの特性ではなく、システム全体の特性として捉えます。最も効果の高い最適化は、データの取得場所、バンドルの分割方法、採用するレンダリング戦略といった、アーキテクチャレベルで行われます。コンポーネントレベルの最適化（メモ化、キーの安定性）も含まれていますが、適切に優先度を下げています。

使用する場面

• 新しい React コンポーネントやページを作成するとき
• React コードのパフォーマンス上の問題をレビューするとき
• ページの読み込みが遅い、または操作の反応が鈍い問題をデバッグするとき
• Core Web Vitals（LCP、FID、CLS）を最適化するとき
• クライアントサイドレンダリングからサーバーサイドレンダリングに移行するとき
• JavaScript バンドルサイズを削減するとき

動作の仕組み

graph TD
    A[React Code Change] --> B{Priority Scan}
    B --> C["🔴 Critical: Waterfalls"]
    B --> D["🔴 Critical: Bundle Size"]
    B --> E["🟠 High: Server Perf"]
    B --> F["🟡 Med-High: Client Fetch"]
    B --> G["🟡 Medium: Re-renders"]
    B --> H["🟡 Medium: Render Perf"]
    B --> I["🔵 Low-Med: Micro-opts"]
    C --> J[Apply Fixes by Priority]
    D --> J
    E --> J
    F --> J
    G --> J
    H --> J
    I --> J

ルールは優先度の高い順に評価されます。クリティカルな問題はブロッカーとして指摘され、優先度の低い項目は提案として記載されます。エージェントは最も影響度の高い修正から適用します。

実装

クリティカル：クライアントとサーバー間のウォーターフォールを排除する

// BAD: Sequential fetches create waterfalls
function Dashboard() {
  const user = use(fetchUser());         // 200ms
  const posts = use(fetchPosts(user.id)); // 200ms after user resolves
  const stats = use(fetchStats(user.id)); // 200ms after user resolves
  // Total: 600ms sequential
}

// GOOD: Parallel fetches with server components
async function Dashboard() {
  const user = await fetchUser();
  const [posts, stats] = await Promise.all([
    fetchPosts(user.id),
    fetchStats(user.id),
  ]);
  // Total: 400ms (user + parallel posts/stats)
}

クリティカル：バンドルサイズを削減する

// BAD: Import entire library
import { format } from "date-fns";

// GOOD: Tree-shakeable import
import { format } from "date-fns/format";

// BAD: Eager loading heavy components
import { HeavyChart } from "./HeavyChart";

// GOOD: Lazy loading with Suspense
const HeavyChart = lazy(() => import("./HeavyChart"));

中程度：再レンダリングを最適化する

// BAD: New object reference every render
<UserContext.Provider value={{ user, theme, locale }}>

// GOOD: Stable reference with useMemo
const contextValue = useMemo(
  () => ({ user, theme, locale }),
  [user, theme, locale]
);
<UserContext.Provider value={contextValue}>

ベストプラクティス

• 中程度または低優先度の項目を最適化する前に、クリティカルな問題を解決してください
• 最適化の前に測定してください。React DevTools Profiler と Lighthouse を使用します
• データフェッチにはサーバーコンポーネントを優先し、クライアントコンポーネントはインタラクティブな機能に限定してください
• 初期ビューポートに表示されないコンポーネントには、dynamic(() => import(...)) を使用してください
• 早まって useMemo／useCallback を使わないでください。まずプロファイリングを行い、再レンダリングにコストがかかっていることを確認してください
• ハイドレーションのコストを最小限に抑えるため、クライアントコンポーネントの境界はできるだけ狭くしてください

プラットフォームの互換性

プラットフォーム	サポート	備考
Cursor	完全	Lint とレビューの統合
VS Code	完全	ESLint プラグインをサポート
Windsurf	完全	React を考慮した分析
Claude Code	完全	コードレビューへの適用
Cline	完全	ルールベースのレビュー
aider	部分的	ルールを手動で適用

関連スキル

• Composition Patterns
• View Transitions
• Web Design Guidelines
• Edge Rendering

キーワード

react performance best-practices bundle-size waterfall-elimination server-components re-render-optimization core-web-vitals

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License