About react18-batching-patterns
A reference skill for automatic batching in React 18 class-component codebases, focused on diagnosing silent issues from asynchronous state updates. It distinguishes state-read bugs, refactoring cases, and situations that may require flushSync, while advising restraint with synchronous flushes.
Key features
- 01React 17 and 18 batching behavior comparison
- 02Diagnosis of state reads after await
- 03Distinction between refactoring and flushSync cases
- 04Guidance on when flushSync applies
Use cases
- 01Debugging async state issues in class components
- 02Checking state reads after await
- 03Deciding whether a loading state must appear immediately
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/react18-batching-patternsin Claude Code to confirm it loaded.
Bundled filesreferences/batching-categories.mdreferences/flushSync-guide.md
Details
From the project READMEReact 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 codereferences/flushSync-guide.md- when to use flushSync, when NOT to, import syntax
The flushSync Rule
Use flushSync sparingly. It forces a synchronous re-render, bypassing React 18's concurrent scheduler. Overusing it negates the performance benefits of React 18.
Only use flushSync when:
- The user must see an intermediate UI state before an async operation begins
- A spinner/loading state must render before a fetch starts
- Sequential UI steps have distinct visible states (progress wizard, multi-step flow)
In most cases, the fix is a refactor - restructuring the code to not read this.state after await. Read references/batching-categories.md for the correct approach per category.