react18-batching-patterns
Provides exact patterns for diagnosing and fixing automatic batching regressions in React 18 class components. Use this skill whenever a class component has multiple setState calls in an async method, inside setTimeout, inside a Promise .then() or .catch(), or in a native event handler. Use it before writing any flushSync call - the decision tree here prevents unnecessary flushSync overuse. Also use this skill when fixing test failures caused by intermediate state assertions that break after React 18 upgrade.
Profile →npx skills add github/awesome-copilot --skill react18-batching-patterns --agent copilot
Same command for any agent — swap --agent for claude-code, codex, cursor.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# React 18 Automatic Batching Patterns Reference for diagnosing and fixing the most dangerous silent breaking change in React 18 for class-component codebases. ## The Core Change | Location of setState | React 17 | React 18 | |---|---|---| | React event handler | Batched | Batched (same) | | setTimeout | **Immediate re-render** | **Batched** | | Promise .then() / .catch() | **Immediate re-render** | **Batched** | | async/await | **Immediate re-render** | **Batched** | | Native addEventListener callback | **Immediate re-render** | **Batched** | **Batched** means: all setState calls within that execution context flush together in a single re-render at the end. No intermediate renders occur. ## Quick Diagnosis Read every async class method. Ask: does any code after an `await` read `this.state` to make a decision? ``` 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) ``` For the full pattern for each category, read: - **`references/batching-categories.md`** - Category A, B, C with full before/after code - **`references/flushSync-gui
- The Core Change
- Quick Diagnosis
- The flushSync Rule
What does the react18-batching-patterns skill do?
Provides exact patterns for diagnosing and fixing automatic batching regressions in React 18 class components. Use this skill whenever a class component has multiple setState calls in an async method, inside setTimeout, inside a Promise .then() or .catch(), or in a native event handler. Use it before writing any flushSync call - the decision tree here prevents unnecessary flushSync overuse. Also use this skill when fixing test failures caused by intermediate state assertions that break after React 18 upgrade.
How do I install it?
Run `npx skills add github/awesome-copilot --skill react18-batching-patterns --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From github/awesome-copilot, a repository with 37,432 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.