前端开发

react18-batching-patterns

Name: react18-batching-patterns
Author: github

github/awesome-copilot

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.

754 次安装
4.1万星标
收录于 2026.04.09

安装命令

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

SKILL.md

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?

SKILL.md

React 18 Automatic Batching Patterns

The Core Change

Quick Diagnosis

相关 Skills