Official agent skill

React18 Batching Patterns

by github in github/awesome-copilot

Provides exact patterns for diagnosing and fixing automatic batching regressions in React 18 class components.

OfficialMITAuto-check passedTesting & QA

Install React18 Batching Patterns

skills CLI
$ npx skills add github/awesome-copilot --skill react18-batching-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install github/awesome-copilot react18-batching-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/github/awesome-copilot.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/react18-batching-patterns .claude/skills/react18-batching-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
react18-batching-patterns
GitHub stars
40k
Used in
1 other repo
Token cost
~621 tokens
SKILL.md length
214 words
Files
3 (incl. references)
Skills in repo
417
Repo updated
First seen
Licence
MIT

At a glance

Provides exact patterns for diagnosing and fixing automatic batching regressions in React 18 class components.

  • A class component has multiple setState calls in an async method
  • SKILL.md covers The Core Change, Quick Diagnosis and The flushSync Rule
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Inside setTimeout

What it does

React18 Batching Patterns is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. 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.

Its SKILL.md is about 620 tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/batching-categories.md` and `references/flushSync-guide.md`).

It sits in Testing & QA, covering Failing and flaky tests. It works with React. The repository describes itself as: Community-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot. The licence is MIT.

When your agent uses it

  • A class component has multiple setState calls in an async method
  • Inside setTimeout
  • Inside a Promise .then()
  • In a native event handler

Example prompts

  • “Use the react18-batching-patterns skill to provide exact patterns for diagnosing and fixing automatic batching regressions in React 18 class…”
  • “/react18-batching-patterns”

What it can do on your machine

Read from SKILL.md and the folder at commit 7cce7cf. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React18 Batching Patterns loads about 621 tokens when it runs, and up to ~2.7k if it reads all its reference files. Until then it costs about 135 tokens; SKILL.md has 214 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~135
When it runs · the whole SKILL.md, loaded when a task matches
~621
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from github/awesome-copilot at commit 7cce7cf, republished under its MIT licence (© github). 214 words, ~621 tokens.

Download SKILL.mdSave it as .claude/skills/react18-batching-patterns/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
react18-batching-patterns
description
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.

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 setStateReact 17React 18
React event handlerBatchedBatched (same)
setTimeoutImmediate re-renderBatched
Promise .then() / .catch()Immediate re-renderBatched
async/awaitImmediate re-renderBatched
Native addEventListener callbackImmediate re-renderBatched

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-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.

© github, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in skills/react18-batching-patterns of github/awesome-copilot.

  • SKILL.md
  • references/batching-categories.md
  • references/flushSync-guide.md

Open the folder on GitHubat commit 7cce7cf

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in github/awesome-copilot, which our catalogue first saw on October 7, 2026.

Compare with similar skills

React18 Batching Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

React18 Batching Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React18 Batching Patterns this skillgithub/awesome-copilot40k1 repos~621Automated safety check: PassMIT
Update Review Rulesimbue-ai/sculptor236—~1.4kAutomated safety check: PassMIT
Bug Hunteroctanejs/octane1.4k—~707Automated safety check: PassMIT
Suede Code ReviewJasonColapietro/suede-creator-skills127—~7.1kAutomated safety check: PassMIT
Test Guided Migration AssistantArabelaTso/Skills-4-SE253—~1.8kAutomated safety check: PassApache-2.0
Pester Failure AnalysisPowerShell/PowerShell56k—~5.1kAutomated safety check: PassMIT

Similar skills

  • Update Review Rules

    imbue-ai/sculptor

    Add a new issue type to one of Sculptor's review-rule docs. An agent skill from imbue-ai/sculptor.

    236 GitHub stars~1.4k tokensUpdated today
    Testing & QAAuto-check passed
  • Bug Hunter

    octanejs/octane

    Find and fix a bug in the octane monorepo. An agent skill from octanejs/octane.

    1.4k GitHub stars~707 tokensUpdated today
    DevelopmentAuto-check passed
  • Suede Code Review

    JasonColapietro/suede-creator-skills

    Suede AI findings-only code review with full context: changed files, callers, contracts, and deploy surface.

    127 GitHub stars~7.1k tokensUpdated today
    DevelopmentAuto-check passed
  • Test Guided Migration Assistant

    ArabelaTso/Skills-4-SE

    Automatically updates a codebase to a new language version, framework version, or library update while ensuring all tests still pass.

    253 GitHub stars~1.8k tokensUpdated 1 mo ago
    Backend & APIsAuto-check passed
  • Pester Failure Analysis

    PowerShell/PowerShell

    Investigates failing Pester tests in PowerShell CI jobs by following a six-step workflow from pull request status to documented fix recommendations.

    56k GitHub stars~5.1k tokensUpdated today
    Testing & QAAuto-check passed
  • Guides changes and reviews of the Cucumber and Playwright end-to-end suite under `e2e/`: feature files, step definitions, support code, tags, locators and assertions.

    158k GitHub stars~682 tokensUpdated today
    Testing & QAAuto-check passed

More from github/awesome-copilot

All 417 skills in this repo
  • Acquire Codebase Knowledge

    github/awesome-copilot

    Official

    Maps an unfamiliar codebase into seven evidence-backed documents in docs/codebase/, using a scan script and templates, for onboarding or architecture write-ups.

    40k GitHub starsUsed in 1 repo~2.3k tokens
    Auto-check passed
  • Azure Architecture Autopilot

    github/awesome-copilot

    Official

    Designs Azure infrastructure from a natural-language description, or diagrams an existing resource group, then refines the design through conversation and deploys it with Bicep.

    40k GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed
  • Draw.io Diagram Generator

    github/awesome-copilot

    Official

    Generates, edits and validates draw.io files with correct mxGraph XML, covering flowcharts, architecture, sequence, ER and UML class diagrams.

    40k GitHub starsUsed in 1 repo~4.9k tokens
    Auto-check passed
  • Credit Risk Data Cleaning

    github/awesome-copilot

    Official

    Cleans raw credit data and screens variables before loan modeling, dropping unstable, noisy or redundant features and writing an Excel report of every step.

    40k GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed
  • Daily Focus Board

    github/awesome-copilot

    Official

    Builds a warm, browser-based daily focus board the user updates by talking to their agent, with Eisenhower priorities, a brain-dump box and kind not-today carryover.

    40k GitHub stars~3k tokensUpdated today
    Auto-check passed
  • Python Pypi Package Builder

    github/awesome-copilot

    Official

    End-to-end skill for building, testing, linting, versioning, and publishing a production-grade Python library to PyPI.

    40k GitHub starsUsed in 1 repo~4.6k tokens
    Auto-check passed

Works with

Categories

Questions about React18 Batching Patterns

What does React18 Batching Patterns do?

Provides exact patterns for diagnosing and fixing automatic batching regressions in React 18 class components. React18 Batching Patterns is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. Provides exact patterns for diagnosing and fixing automatic batching regressions in React 18 class components.

When should I use React18 Batching Patterns?

React18 Batching Patterns fits situations like: A class component has multiple setState calls in an async method; inside setTimeout; inside a Promise .then(); in a native event handler.

How do I install React18 Batching Patterns in Claude Code?

Run `npx skills add github/awesome-copilot --skill react18-batching-patterns -a claude-code`. Or copy the skill folder (skills/react18-batching-patterns in github/awesome-copilot) into .claude/skills/react18-batching-patterns in your project. Claude Code loads it when a task matches its description.

How do I install React18 Batching Patterns in Codex?

Run `npx skills add github/awesome-copilot --skill react18-batching-patterns -a codex`. Or copy the skill folder (skills/react18-batching-patterns in github/awesome-copilot) into .agents/skills/react18-batching-patterns in your project. Codex loads it when a task matches its description.

Can I use React18 Batching Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add github/awesome-copilot --skill react18-batching-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react18-batching-patterns, .gemini/skills/react18-batching-patterns, .github/skills/react18-batching-patterns and .opencode/skills/react18-batching-patterns in your project.

What does React18 Batching Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: React18 Batching Patterns is instructions for the agent only.

Does React18 Batching Patterns access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is React18 Batching Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does React18 Batching Patterns use?

React18 Batching Patterns is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React18 Batching Patterns use?

About 621 tokens (SKILL.md is roughly 2.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.1k tokens, read only when the agent opens those files.

What are the alternatives to React18 Batching Patterns?

Skills that share tags, products or a category with React18 Batching Patterns: Update Review Rules (imbue-ai/sculptor, 236 stars), Bug Hunter (octanejs/octane, 1.4k stars), Suede Code Review (JasonColapietro/suede-creator-skills, 127 stars) and Test Guided Migration Assistant (ArabelaTso/Skills-4-SE, 253 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React18 Batching Patterns?

github (a GitHub organization, an official publisher) maintains it in github/awesome-copilot, which has 39,792 GitHub stars. The repository holds 417 skills in this directory. The repository was last updated on October 8, 2026.

Source: github/awesome-copilot on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.