react-best-practices

Name: react-best-practices
Author: redpanda-data

github.com/redpanda-data開発4.4k81 回インストール今日更新

リポジトリ

react-best-practices について

React 開発者向けのパフォーマンス最適化スキルです。バンドル、レンダリング、非同期処理、ブラウザー動作に関する 29 のルールを、カテゴリと影響度で整理しています。

主な機能

01カテゴリと影響度で整理した 29 のルール
02バンドルサイズ最適化の指針
03再レンダリング防止のパターン
04レンダリングと非同期処理の推奨事項
05JavaScript とブラウザーの実践方法

活用シーン

01コンポーネントの再レンダリング調査
02バンドルサイズの削減
03useEffect と useMemo の使い方の確認

インストール

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

$npx skills add https://github.com/redpanda-data/console --skill react-best-practices

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

同梱ファイル

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

rules/

advanced-event-handler-refs.md

advanced-use-latest.md

async-defer-await.md

async-dependencies.md

async-suspense-boundaries.md

bundle-barrel-imports.md

bundle-code-splitting.md

bundle-preload.md

client-event-listeners.md

client-passive-event-listeners.md

js-batch-dom-css.md

js-caching-patterns.md

js-index-maps.md

js-length-check-first.md

js-tosorted-immutable.md

rendering-activity.md

rendering-animate-svg-wrapper.md

rendering-conditional-render.md

rendering-content-visibility.md

rendering-hoist-jsx.md

rendering-svg-precision.md

rerender-defer-reads.md

rerender-dependencies.md

rerender-derived-state.md

rerender-functional-setstate.md

rerender-lazy-state-init.md

rerender-memo.md

rerender-simple-expression-in-memo.md

rerender-transitions.md

use-effect.md

詳細

React のベストプラクティス

Cloud UI 向けのクライアントサイド React 最適化パターンです。カテゴリと影響度別に整理された 29 のルールを紹介します。

適用条件

パフォーマンス最適化タスク
コンポーネントの再レンダリングに関する問題
バンドルサイズに関する懸念
useEffect/useMemo のパターン

カテゴリ別のルール

バンドルの最適化（CRITICAL）

ルール	要点
`bundle-barrel-imports`	バレルの `index.ts` ではなく、ソースファイルからインポートします
`bundle-code-splitting`	大きなコンポーネント、条件付き読み込み、遅延読み込みするサードパーティーライブラリには `React.lazy` + `Suspense` を使います
`bundle-preload`	重要なリソースをプリロードします

再レンダリングの防止（HIGH）

ルール	要点
`rerender-memo`	コストの高い計算をメモ化します
`rerender-dependencies`	フックの依存配列を最小限にします
`rerender-derived-state`	エフェクト内ではなく、レンダリング中に計算します
`rerender-functional-setstate`	古いクロージャーを避けるために `setState(prev => ...)` を使います
`rerender-lazy-state-init`	`useState(expensive())` ではなく `useState(() => expensive())` を使います
`rerender-simple-expression-in-memo`	単純な式はメモ化しません
`rerender-transitions`	緊急性の低い更新には `useTransition` を使います
`rerender-defer-reads`	URL パラメーターやストレージはレンダリング時ではなく、コールバック内で読み取ります

レンダリング（MEDIUM）

ルール	要点
`rendering-conditional-render`	`&&` / 三項演算子で短絡評価し、エフェクト内でのレンダリングは避けます
`rendering-hoist-jsx`	静的な JSX をコンポーネントの外に移動します
`rendering-content-visibility`	画面外の要素には CSS `content-visibility: auto` を使います
`rendering-activity`	非表示の UI には React `<Activity>` を使います
`rendering-animate-svg-wrapper`	アニメーションする SVG をラップして、再レンダリングを分離します
`rendering-svg-precision`	SVG 座標の精度を抑えます

非同期処理（MEDIUM）

ルール	要点
`async-suspense-boundaries`	粒度の細かい `<Suspense>` 境界を設けます
`async-defer-await`	ブロックしない処理は await しません
`async-dependencies`	依存関係は順次ではなく、並列で読み込みます

JavaScript（MEDIUM）

ルール	要点
`js-caching-patterns`	繰り返し呼び出しやストレージ読み取りには、モジュールレベルの Map キャッシュを使います
`js-batch-dom-css`	レイアウトスラッシングを避けるため、DOM の読み取りと書き込みをまとめて行います
`js-index-maps`	配列を事前に Map へインデックス化し、O(1) で検索できるようにします
`js-length-check-first`	コストの高い操作の前に `.length` を確認します
`js-tosorted-immutable`	不変の変換には `.toSorted()` / `.toReversed()` を使います

正規表現の巻き上げは Biome（useTopLevelRegex）によって適用されます。

ブラウザー（MEDIUM）

ルール	要点
`client-event-listeners`	useEffect の戻り値でイベントリスナーをクリーンアップします
`client-passive-event-listeners`	スクロールやタッチのハンドラーには `{ passive: true }` を指定します

高度なテクニック（LOW）

ルール	要点
`advanced-event-handler-refs`	子コンポーネントの再レンダリングを避けるため、安定したコールバック ref を使います
`advanced-use-latest`	コールバック内で常に最新の値を使うには、`useLatest` パターンを使います

Markdown 対応

ログインしてコメント

基本情報

作者: redpanda-data
リポジトリ: redpanda-data/console
カテゴリ: 開発
インストール数: 81
GitHub スター: 4,353

問題を報告

おすすめの 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

876.8k

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