mcpField
R
react18-batching-patterns

react18-batching-patterns

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

react18-batching-patterns について

React 18 のクラスコンポーネントで自動バッチ処理を扱うリファレンススキルです。非同期の状態更新による見えにくい問題を診断し、状態読み取りの不具合、リファクタリング、flushSync が必要な場面を区別します。

主な機能

  1. 01React 17 と 18 のバッチ処理比較
  2. 02await 後の状態読み取りの診断
  3. 03リファクタリングと flushSync の使い分け
  4. 04flushSync の適用条件

活用シーン

  1. 01クラスコンポーネントの非同期状態問題の調査
  2. 02await 後の状態読み取りの確認
  3. 03ローディング表示を即時に出す必要性の判断

インストール

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

$npx skills add https://github.com/github/awesome-copilot --skill react18-batching-patterns

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

同梱ファイルreferences/batching-categories.mdreferences/flushSync-guide.md

詳細

React 18 の自動バッチ処理パターン

クラスコンポーネントを使用するコードベースで、React 18 における最も危険なサイレントな破壊的変更を診断し、修正するためのリファレンスです。

主な変更点

setState の場所React 17React 18
React のイベントハンドラーバッチ処理バッチ処理（変更なし）
setTimeout即時再レンダリングバッチ処理
Promise の .then() / .catch()即時再レンダリングバッチ処理
async/await即時再レンダリングバッチ処理
ネイティブの addEventListener コールバック即時再レンダリングバッチ処理

バッチ処理とは、実行コンテキスト内のすべての setState 呼び出しがまとめて処理され、最後に再レンダリングが1回だけ行われることを意味します。途中の再レンダリングは発生しません。

簡易診断

すべての非同期クラスメソッドを確認してください。await の後に、何らかの判断をするために this.state を読み取るコードがあるか確認します。

Code reads this.state after await?
  YES → Category A (silent state-read bug)
  NO, but intermediate render must be visible to user?
    YES → Category C (flushSync needed)
    NO → Category B (refactor, no flushSync)

各カテゴリの全パターンについては、以下を参照してください。

  • references/batching-categories.md - カテゴリ A、B、C の変更前／変更後のコード全例
  • references/flushSync-guide.md - flushSync を使う場合と使わない場合、インポート構文

flushSync のルール

flushSync は控えめに使用してください。 同期再レンダリングを強制し、React 18 の並行スケジューラーを迂回します。使いすぎると、React 18 のパフォーマンス上のメリットが失われます。

flushSync を使用するのは、次の場合に限ってください。

  • 非同期処理が始まる前に、ユーザーが中間状態の UI を確認する必要がある
  • フェッチの開始前に、スピナー／読み込み状態を描画する必要がある
  • UI の各ステップで、それぞれ異なる状態を表示する必要がある（進行状況ウィザード、複数ステップのフロー）

ほとんどの場合、修正方法はリファクタリングです。つまり、await の後に this.state を読み取らないようにコードを再構成します。カテゴリごとの適切な方法については、references/batching-categories.md を参照してください。

コメント

Markdown 対応