skilld
All skills
github avatar

/react18-batching-patterns

@90921cc official
by githubgithub/awesome-copilot40k stars
5,040

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.

Ask your Agent

Use this Skill: https://skilld.dev/gh/github/awesome-copilot/react18-batching-patterns

This session only. Nothing lands on disk.

referencesflushSync-guide.md

≈618 tokens on demand. Your agent reads this file only when SKILL.md points to it.

flushSync Guide

Import

import { flushSync } from 'react-dom';
// NOT from 'react' - it lives in react-dom

If the file already imports from react-dom:

import ReactDOM from 'react-dom';
// Add named import:
import ReactDOM, { flushSync } from 'react-dom';

Syntax

flushSync(() => {
  this.setState({ ... });
});
// After this line, the re-render has completed synchronously

Multiple setState calls inside one flushSync batch together into ONE synchronous render:

flushSync(() => {
  this.setState({ step: 'loading' });
  this.setState({ progress: 0 });
  // These batch together → one render
});

When to Use

✅ Use when the user must see a specific UI state BEFORE an async operation starts:

flushSync(() => this.setState({ loading: true }));
await expensiveAsyncOperation();

✅ Use in multi-step progress flows where each step must visually complete before the next:

flushSync(() => this.setState({ status: 'validating' }));
await validate();
flushSync(() => this.setState({ status: 'processing' }));
await process();

✅ Use in tests that must assert an intermediate UI state synchronously (avoid when possible - prefer waitFor).

When NOT to Use

❌ Don't use it to "fix" a reading-this.state-after-await bug - that's Category A (refactor instead):

// WRONG - flushSync doesn't fix this
flushSync(() => this.setState({ loading: true }));
const data = await fetchData();
if (this.state.loading) { ... } // still a race condition

❌ Don't use it for every setState to "be safe" - it defeats React 18 concurrent rendering:

// WRONG - excessive flushSync
async handleClick() {
  flushSync(() => this.setState({ clicked: true }));   // unnecessary
  flushSync(() => this.setState({ processing: true })); // unnecessary
  const result = await doWork();
  flushSync(() => this.setState({ result, done: true })); // unnecessary
}

❌ Don't use it inside a useEffect or componentDidMount to trigger immediate state - it causes nested render cycles.

Performance Note

flushSync forces a synchronous render, which blocks the browser thread until the render completes. On slow devices or complex component trees, multiple flushSync calls in an async method will cause visible jank. Use sparingly.

If you find yourself adding more than 2 flushSync calls to a single method, reconsider whether the component's state model needs redesign.

Source: SKILL.md on GitHub

Third-party checks

No alerts15d4 checks · Risk SAFE
  • Gen Agent Trust Hub15d

    This skill provides technical documentation and code patterns for diagnosing and fixing React 18 automatic batching regressions. It is purely informational and contains no executable code or external dependencies.

  • Socket15d

    No alerts

  • Snyk15d

    Risk: LOW · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at 90921cc. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 20 hours ago.

Activeupdated 5 months ago

Topics

README badge

README badge for github/awesome-copilot/react18-batching-patterns

What it does

Provides decision trees and patterns for diagnosing and fixing React 18's automatic batching behavior in class components, particularly setState calls in async methods, Promises, and native event handlers that silently broke in React 18. Use this before adding flushSync calls to determine whether you need synchronous re-renders or should refactor to avoid reading stale state after await.

Generated from the current SKILL.md.

Frequently asked

Does this skill apply to functional components with hooks?
No. This skill targets class components only. React 18 batching behavior for functional components with useState is different and not covered here.
When should I use flushSync to fix a batching regression?
Only when the user must see an intermediate UI state before an async operation begins, like a loading spinner before a fetch. Most batching regressions should be fixed by refactoring to avoid reading this.state after await, not by adding flushSync.
Does this skill help with test failures after upgrading to React 18?
Yes. It covers fixing test failures caused by intermediate state assertions that break after React 18 upgrade, since intermediate re-renders no longer occur in setTimeout, Promise .then(), or async/await contexts.
What async contexts are affected by React 18 batching changes?
setTimeout, Promise .then()/.catch(), async/await, and native addEventListener callbacks now batch setState calls together in React 18, whereas React 17 would re-render immediately after each one.

Generated from the current SKILL.md. These answers refresh after source changes.