react-best-practices

SKILL.md

Performance patterns and guidelines from react.dev and Vercel Engineering.

| Avoid unnecessary effects | Render cycles, bugs | effect-pitfalls.md | | Eliminate waterfalls | First paint, TTI | async-waterfall-elimination.md | | Parallel data fetching | Load time | async-parallel-requests.md | | Avoid barrel imports | Bundle size | bundle-barrel-imports.md |

| React Compiler (19+) | Auto memoization | react-compiler.md | | Dynamic imports | Code splitting | bundle-dynamic-import.md | | Preload on user intent | Perceived latency | bundle-preload.md | | Strategic memo() | Render perf | rerender-memo-strategy.md | | Server caching | Server response | server-cache-patterns.md |

React.dev と Vercel からの React のベスト プラクティス。次の場合に使用します: (1) React コードのレビュー、(2) パフォーマンスの問題のデバッグ、(3) バンドル サイズの最適化、(4) エフェクトまたは状態ロジックの作成。トリガーの対象: React パフォーマンス、再レンダリング、バンドル サイズ、ウォーターフォール、コード分割、メモ、useCallback、useMemo、useEffect、SSR フリッカー、初期ロードの遅さ、React コンパイラー、状態構造、不変更新、setState 配列オブジェクト。 ソース: ahonn/dotfiles。

原文を見る