mcpField
R
react-best-practices

react-best-practices

github.com/davila7開発33.0k549 回インストール今日更新
リポジトリ

react-best-practices について

React と Next.js アプリの最適化やレビューに使うパフォーマンススキルです。8つの影響度別カテゴリで指針を整理し、リクエストのウォーターフォールやバンドルサイズ、不要な再レンダリングなどの例を示します。

主な機能

  1. 018カテゴリのパフォーマンス指針
  2. 02ウォーターフォールとバンドルサイズの削減
  3. 03サーバーとクライアントのデータ取得パターン
  4. 04描画と再レンダリングの最適化
  5. 05コード例と影響分析
  6. 06プロファイリングを先行する最適化手順

活用シーン

  1. 01Reactコードのパフォーマンスレビュー
  2. 02読み込み遅延とJavaScriptバンドルサイズの削減
  3. 03描画やデータ取得の遅さの診断
  4. 04最適化の適用と効果測定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/davila7/claude-code-templates --skill react-best-practices

インストール後、Claude Code で/react-best-practicesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
react-performance-guidelines.md
references/rules/
_template.md
advanced-event-handler-refs.md
_sections.md
async-defer-await.md
async-parallel.md
async-dependencies.md
async-api-routes.md
advanced-use-latest.md
async-suspense-boundaries.md
bundle-barrel-imports.md
bundle-dynamic-imports.md
bundle-conditional.md
client-swr-dedup.md
bundle-defer-third-party.md
client-event-listeners.md
bundle-preload.md
js-batch-dom-css.md
download_rules.sh
js-cache-function-results.md
js-cache-property-access.md
js-early-exit.md
js-length-check-first.md
js-combine-iterations.md
js-hoist-regexp.md
js-cache-storage.md
js-index-maps.md
js-set-map-lookups.md
js-tosorted-immutable.md
js-min-max-loop.md

詳細

React ベストプラクティス - パフォーマンス最適化

影響度レベル別に整理された40以上のルールを備えた、React および Next.js アプリケーション向けの包括的なパフォーマンス最適化ガイドです。開発者がパフォーマンスのボトルネックを解消し、ベストプラクティスに従えるよう支援することを目的としています。

このスキルを使用するタイミング

React ベストプラクティスを使用する場合:

  • React または Next.js アプリケーションのパフォーマンスを最適化するとき
  • パフォーマンス改善のためにコードをレビューするとき
  • パフォーマンス向上のために既存のコンポーネントをリファクタリングするとき
  • パフォーマンスを意識して新機能を実装するとき
  • レンダリングや読み込みの遅さをデバッグするとき
  • バンドルサイズを削減するとき
  • リクエストのウォーターフォールを解消するとき

対象となる主な領域:

  • ウォーターフォールの解消 (CRITICAL): 逐次的な非同期処理を防ぐ
  • バンドルサイズの最適化 (CRITICAL): 初期 JavaScript のペイロードを削減する
  • サーバーサイドのパフォーマンス (HIGH): RSC とデータフェッチを最適化する
  • クライアントサイドのデータフェッチ (MEDIUM-HIGH): 効率的なキャッシュを実装する
  • 再レンダリングの最適化 (MEDIUM): 不要な再レンダリングを最小化する
  • レンダリングパフォーマンス (MEDIUM): ブラウザのレンダリングを最適化する
  • JavaScript のパフォーマンス (LOW-MEDIUM): ホットパスに対するマイクロ最適化
  • 高度なパターン (LOW): エッジケース向けの特殊な手法

クイックリファレンス

重要な優先事項
  1. await を必要になるまで遅らせる - await を実際に使用される分岐の中へ移動する
  2. Promise.all() を使う - 独立した非同期処理を並列化する
  3. バレルインポートを避ける - ソースファイルから直接インポートする
  4. 動的インポート - 重いコンポーネントを遅延読み込みする
  5. 戦略的な Suspense - レイアウトを表示しつつコンテンツをストリーミングする
よくあるパターン

並列データフェッチ:

const [user, posts, comments] = await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments()
])

直接インポート:

// ❌ Loads entire library
import { Check } from 'lucide-react'

// ✅ Loads only what you need
import Check from 'lucide-react/dist/esm/icons/check'

動的コンポーネント:

import dynamic from 'next/dynamic'

const MonacoEditor = dynamic(
  () => import('./monaco-editor'),
  { ssr: false }
)

ガイドラインの使い方

完全なパフォーマンスガイドラインは references フォルダにあります:

  • react-performance-guidelines.md: 40以上のすべてのルール、コード例、影響分析を含む完全なガイド

各ルールには以下が含まれます:

  • 誤りと正しい例のコード比較
  • 具体的な影響の指標
  • 最適化を適用するタイミング
  • 実際の事例

カテゴリの概要

1. ウォーターフォールの解消 (CRITICAL)

ウォーターフォールはパフォーマンスを損なう最大の原因です。逐次的な await はそれぞれ完全なネットワーク遅延を加算します。

  • await を必要になるまで遅らせる
  • 依存関係に基づく並列化
  • API ルートでのウォーターフォールチェーンを防ぐ
  • 独立した処理のための Promise.all()
  • 戦略的な Suspense 境界
2. バンドルサイズの最適化 (CRITICAL)

初期バンドルサイズを削減すると、Time to Interactive と Largest Contentful Paint が改善します。

  • バレルファイルからのインポートを避ける
  • 条件付きのモジュール読み込み
  • 重要度の低いサードパーティライブラリを遅延させる
  • 重いコンポーネントのための動的インポート
  • ユーザーの意図に基づくプリロード
3. サーバーサイドのパフォーマンス (HIGH)

サーバーサイドレンダリングとデータフェッチを最適化します。

  • リクエストをまたぐ LRU キャッシュ
  • RSC 境界でのシリアライズを最小化する
  • コンポーネント合成による並列データフェッチ
  • React.cache() によるリクエスト単位の重複排除
4. クライアントサイドのデータフェッチ (MEDIUM-HIGH)

自動的な重複排除と効率的なデータフェッチのパターンです。

  • グローバルなイベントリスナーの重複排除
  • 自動的な重複排除のために SWR を使う
5. 再レンダリングの最適化 (MEDIUM)

無駄な計算を減らすため、不要な再レンダリングを削減します。

  • 状態の読み取りを使用箇所まで遅らせる
  • メモ化されたコンポーネントへ切り出す
  • effect の依存関係を絞り込む
  • 派生状態を購読する
  • 遅延状態初期化を使う
  • 緊急性の低い更新には transition を使う
6. レンダリングパフォーマンス (MEDIUM)

ブラウザのレンダリング処理を最適化します。

  • SVG 要素ではなく SVG ラッパーをアニメーションさせる
  • 長いリストに CSS content-visibility を使う
  • 静的な JSX 要素をホイストする
  • SVG の精度を最適化する
  • ちらつきなしでハイドレーションの不一致を防ぐ
  • 表示/非表示に Activity コンポーネントを使う
  • 明示的な条件付きレンダリングを使う
7. JavaScript パフォーマンス (LOW-MEDIUM)

ホットパスに対する細かな最適化です。

  • DOM の CSS 変更をまとめて行う
  • 繰り返し行う検索のためにインデックスマップを構築する
  • ループ内でプロパティアクセスをキャッシュする
  • 繰り返し呼び出される関数の結果をキャッシュする
  • ストレージ API の呼び出しをキャッシュする
  • 複数の配列の反復処理を結合する
  • 配列比較では事前に長さをチェックする
  • 関数からは早期にリターンする
  • RegExp の生成を巻き上げる
  • sort の代わりにループで最小値・最大値を求める
  • O(1) の検索には Set/Map を使用する
  • sort() の代わりに toSorted() を使用する
8. 高度なパターン (LOW)

エッジケース向けの特殊なテクニックです。

  • イベントハンドラーを ref に保存する
  • 安定したコールバック ref のために useLatest を使用する

実装のアプローチ

React アプリケーションを最適化する際は、次の手順に従ってください。

  1. まずプロファイリングする: React DevTools Profiler とブラウザのパフォーマンスツールを使用して、ボトルネックを特定します
  2. クリティカルパスに集中する: ウォーターフォールの解消とバンドルサイズの削減から始めます
  3. 効果を測定する: LCP、TTI、FID などの指標で改善を検証します
  4. 段階的に適用する: 早まった過度な最適化はしないでください
  5. 十分にテストする: 最適化によって機能が壊れていないことを確認します

追跡すべき主な指標

  • Time to Interactive (TTI): ページが完全に操作可能になるまでの時間
  • Largest Contentful Paint (LCP): メインコンテンツが表示されるまでの時間
  • First Input Delay (FID): ユーザー操作に対する応答性
  • Cumulative Layout Shift (CLS): 視覚的な安定性
  • バンドルサイズ: 初期 JavaScript のペイロード
  • サーバー応答時間: サーバーサイドレンダリングされたコンテンツの TTFB

避けるべきよくある落とし穴

❌ 避けるべきこと:

  • 大規模ライブラリからのバレルインポートを使用する
  • 独立した処理を逐次的な await でブロックする
  • 一部だけ更新が必要なのにツリー全体を再レンダリングする
  • 分析・トラッキングをクリティカルパスで読み込む
  • .toSorted() ではなく .sort() で配列を変更する
  • レンダー内で RegExp や重いオブジェクトを生成する

✅ 推奨すること:

  • ソースファイルから直接インポートする
  • 独立した処理には Promise.all() を使用する
  • 高コストなコンポーネントをメモ化する
  • 重要でないコードは遅延読み込みする
  • イミュータブルな配列メソッドを使用する
  • 静的なオブジェクトはコンポーネントの外に巻き上げる

リソース

バージョン履歴

v0.1.0 (2026年1月)

  • Vercel Engineering による初回リリース
  • 8 つのカテゴリにわたる 40 以上のパフォーマンスルール
  • 包括的なコード例と影響分析

コメント

Markdown 対応