React18 Batching Patterns

If you're migrating a class component codebase to React 18, this is your batching regression field guide. React 18 now batches setState calls inside setTimeout, promises, and async/await where React 17 didn't, which silently breaks code that reads this.state after an await to make decisions. The skill gives you a three category diagnostic tree and shows exactly when to use flushSync versus when to refactor. The real value is the flushSync discipline, it stops you from papering over batching issues with synchronous renders everywhere, which would kill the performance gains you upgraded for. Includes a comparison table and concrete before/after patterns for each scenario.

skills.sh installs: 756
GitHub stars: 41K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add github/awesome-copilot --skill react18-batching-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

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)

SKILL.md on GitHub