react-best-practices

Name: react-best-practices
Author: onekeyhq

github.com/onekeyhq開発2.5k109 回インストール2 日前に更新

リポジトリ

react-best-practices について

react-best-practicesは、ReactおよびNext.jsアプリの開発やレビューに使うリファレンススキルです。性能改善の指針を優先度別に整理し、ローカルの例やルールファイルも提供します。

主な機能

018カテゴリにわたる40以上のルール
02優先度順の性能ガイド
03サーバーとクライアントの実装パターン
04ローカルのルールファイルと例

活用シーン

01Reactコードの性能問題をレビュー
02データ取得とレンダリングを最適化
03バンドルサイズと読み込み時間を削減

インストール

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

$npx skills add https://github.com/onekeyhq/app-monorepo --skill react-best-practices

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

同梱ファイル

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

references/

react-performance-guidelines.md

references/rules/

_sections.md

_template.md

advanced-event-handler-refs.md

advanced-use-latest.md

async-api-routes.md

async-defer-await.md

async-dependencies.md

async-parallel.md

async-suspense-boundaries.md

bundle-barrel-imports.md

bundle-conditional.md

bundle-defer-third-party.md

bundle-dynamic-imports.md

bundle-preload.md

client-event-listeners.md

client-swr-dedup.md

js-batch-dom-css.md

js-cache-function-results.md

js-cache-property-access.md

js-cache-storage.md

js-combine-iterations.md

js-early-exit.md

js-hoist-regexp.md

js-index-maps.md

js-length-check-first.md

js-min-max-loop.md

js-set-map-lookups.md

js-tosorted-immutable.md

rendering-activity.md

詳細

React のベストプラクティス

帰属：vercel-labs/agent-skills からフォークしたスキルです。ドキュメントとリファレンスはすべてこのリポジトリにローカルで含まれているため、ネットワークアクセスは不要です。

概要

React および Next.js アプリケーション向けの包括的なパフォーマンス最適化ガイドです。8 つのカテゴリにわたる 40 以上のルールを収録しています。自動リファクタリングとコード生成の指針となるよう、影響度に応じてルールに優先順位を付けています。

適用するタイミング

次の場合にこれらのガイドラインを参照してください。

新しい React コンポーネントや Next.js ページを作成するとき
データ取得を実装するとき（クライアント側またはサーバー側）
パフォーマンスの問題がないかコードをレビューするとき
既存の React／Next.js コードをリファクタリングするとき
バンドルサイズや読み込み時間を最適化するとき

優先度順のガイドライン

ルールは影響度に応じて優先順位が付けられています。

優先度	カテゴリ	影響度
1	ウォーターフォールの解消	CRITICAL
2	バンドルサイズの最適化	CRITICAL
3	サーバー側のパフォーマンス	HIGH
4	クライアント側のデータ取得	MEDIUM-HIGH
5	再レンダリングの最適化	MEDIUM
6	レンダリングのパフォーマンス	MEDIUM
7	JavaScript のパフォーマンス	LOW-MEDIUM
8	高度なパターン	LOW

クイックリファレンス

重要なパターン（最初に適用）

ウォーターフォールを解消する：

必要になるまで await を遅らせます（分岐の中に移動します）
独立した非同期処理には Promise.all() を使います
プロミスを早めに開始し、遅れて await します
部分的な依存関係には better-all を使います
Suspense 境界を使ってコンテンツをストリーミングします

バンドルサイズを削減する：

バレルファイルからのインポートを避けます（ソースから直接インポートします）
重いコンポーネントには next/dynamic を使います
重要度の低いサードパーティライブラリの読み込みを遅らせます
ユーザーの意図に基づいてプリロードします

影響度の高いサーバー側のパターン

リクエストごとの重複排除には React.cache() を使います
リクエストをまたいだキャッシュには LRU キャッシュを使います
RSC 境界でのシリアライズを最小限に抑えます
コンポーネントの合成によってデータ取得を並列化します

影響度が中程度のクライアント側のパターン

リクエストの自動重複排除には SWR を使います
状態の読み取りを使用箇所まで遅らせます
コストの高い値には遅延状態初期化を使います
派生状態のサブスクリプションを使います
緊急性の低い更新には startTransition を適用します

レンダリングのパターン

SVG 要素を直接ではなく、SVG のラッパーをアニメーション化します
長いリストには content-visibility: auto を使います
インラインスクリプトでハイドレーションの不一致を防ぎます
明示的な条件付きレンダリングを使います（&& ではなく ? :）

JavaScript のパターン

クラスを使って DOM の CSS 変更をまとめます
繰り返し行う検索のためにインデックスマップを作成します
関数呼び出しの結果をキャッシュします
不変性を保つため、sort() の代わりに toSorted() を使います
配列を比較する前に長さを確認します

リファレンス

コード例を含む完全なドキュメントは、次の場所にあります。

references/react-performance-guidelines.md - すべてのパターンを含む完全ガイド
references/rules/ - カテゴリ別に整理された個別のルールファイル

特定のパターンを検索するには、rules ディレクトリを grep します。

grep -l "suspense" references/rules/
grep -l "barrel" references/rules/
grep -l "swr" references/rules/

`references/rules/` のルールカテゴリ

async-* - ウォーターフォールの解消パターン
bundle-* - バンドルサイズの最適化
server-* - サーバー側のパフォーマンス
client-* - クライアント側のデータ取得
rerender-* - 再レンダリングの最適化
rendering-* - DOM レンダリングのパフォーマンス
js-* - JavaScript のマイクロ最適化
advanced-* - 高度なパターン

Markdown 対応

ログインしてコメント

基本情報

作者: onekeyhq
リポジトリ: onekeyhq/app-monorepo
カテゴリ: 開発
インストール数: 109
GitHub スター: 2,482

問題を報告

おすすめの Skills

すべての Skills

remotion-render

github.com/inference-sh

1.6M

inference.sh を介して React/Remotion コンポーネントコードから動画をレンダリングします。TSX コードを渡すと MP4 を取得できます。useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence など、すべての Remotion API に対応します。解像度、FPS、長さ、コーデックを設定できます。用途：プログラムによる動画生成、アニメーショングラフィック、モーションデザイン、データ駆動型動画、React アニメーションの動画化。トリガー：remotion、render video from code、tsx to video、react video、programmatic video、remotion render、code to video、animated video、motion graphics code、react animation video

design-mobile-apps

github.com/designed-by-ai

1.3M

Sleek でモバイルアプリの画面をデザインし、Sleek プロジェクトを編集して、React Native または HTML でデザインを実装します。

improve-codebase-architecture

github.com/mattpocock

1.2M

コードベースをスキャンして改善の機会を探し、ビジュアル HTML レポートとして提示し、選択したものを詳しく掘り下げる。

vercel-react-best-practices

github.com/vercel-labs

881.3k

Vercel Engineering の React および Next.js パフォーマンス最適化ガイドライン。React / Next.js コードを記述、レビュー、またはリファクタリングするときに、最適なパフォーマンスパターンを確保するため、このスキルを使用する必要があります。React コンポーネント、Next.js ページ、データ取得、バンドル最適化、またはパフォーマンス改善を含むタスクで発火します。