bulletproof-react-components

堅牢な React コンポーネント

ハッピーパス以外の実環境でも React コンポーネントが機能するようにする 9 つのパターンです。SSR、ハイドレーション、並行レンダリング、ポータルなどに対応します。

ソース：shud.in/thoughts/build-bulletproof-react-components

仕組み

1. 再利用可能な React コンポーネントを作成またはレビューする際は、以下のクイックルールを参照します
2. コード例と詳しい説明については、./references/patterns.md を読みます
3. リリース前にチェックリストを確認します

クイックルール

#	パターン	ルール
1	サーバー対応	レンダリング中にブラウザー API（localStorage、window、document）を呼び出してはいけません。useEffect を使用します。
2	ハイドレーション対応	React のハイドレーション前にクライアント依存の値を設定するため、同期インライン <script> を挿入します。
3	インスタンス対応	生成する ID にはすべて useId() を使用します。再利用可能なコンポーネントで ID をハードコードしてはいけません。
4	並行処理対応	リクエストごとの呼び出しを重複排除するため、サーバーのデータ取得を React.cache() でラップします。
5	コンポジション対応	React.cloneElement() の代わりに Context を使用します。cloneElement は Server Components、lazy、memo で問題を引き起こします。
6	ポータル対応	イベントリスナーにはグローバルな window ではなく、ref.current?.ownerDocument.defaultView || window を使用します。
7	トランジション対応	View Transition API のアニメーションを有効にするため、状態更新を startTransition() でラップします。
8	Activity 対応	<Activity> によって非表示になったときに DOM の副作用（例：<style> タグ）を無効にするには、useLayoutEffect を使用します。
9	将来対応	安定した同一性には useState(() => value) を使用します。useMemo はパフォーマンス上のヒントにすぎず、React が破棄する可能性があります。

チェックリスト

再利用可能な React コンポーネントを作成する際に、次の点を確認します。

• レンダリング中にブラウザー API を呼び出していない（サーバー対応）
• クライアントストレージの値がハイドレーション時に一瞬ちらつかない（ハイドレーション対応）
• ID をハードコードせず、useId() を使用している（インスタンス対応）
• サーバーのデータ取得を cache() でラップしている（並行処理対応）
• cloneElement の代わりに Context を使用している（コンポジション対応）
• イベントリスナーに ownerDocument.defaultView を使用している（ポータル対応）
• 必要な箇所で状態更新を startTransition() でラップしている（トランジション対応）
• DOM の副作用が <Activity> の表示状態に従っている（Activity 対応）
• 安定した値に useMemo ではなく useState の初期化関数を使用している（将来対応）

結果をユーザーに提示する

これらのパターンに照らしてコンポーネントをレビューする際は、次の形式にします。

**Bulletproof Check: `<ComponentName>`**

| Pattern | Status | Notes |
|---------|--------|-------|
| Server-Proof | PASS/FAIL | ... |
| ... | ... | ... |

**Suggested fixes:**
1. ...

参考資料

• ./references/patterns.md — 9 つすべてのパターンについて、詳細なコード例（悪い例／良い例）を掲載