{"id":"904e05b8-d4c4-4d37-bd5f-fc9857622516","shortId":"PFzS2E","kind":"skill","title":"react18-batching-patterns","tagline":"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 h","description":"# React 18 Automatic Batching Patterns\n\nReference for diagnosing and fixing the most dangerous silent breaking change in React 18 for class-component codebases.\n\n## The Core Change\n\n| Location of setState | React 17 | React 18 |\n|---|---|---|\n| React event handler | Batched | Batched (same) |\n| setTimeout | **Immediate re-render** | **Batched** |\n| Promise .then() / .catch() | **Immediate re-render** | **Batched** |\n| async/await | **Immediate re-render** | **Batched** |\n| Native addEventListener callback | **Immediate re-render** | **Batched** |\n\n**Batched** means: all setState calls within that execution context flush together in a single re-render at the end. No intermediate renders occur.\n\n## Quick Diagnosis\n\nRead every async class method. Ask: does any code after an `await` read `this.state` to make a decision?\n\n```\nCode reads this.state after await?\n  YES → Category A (silent state-read bug)\n  NO, but intermediate render must be visible to user?\n    YES → Category C (flushSync needed)\n    NO → Category B (refactor, no flushSync)\n```\n\nFor the full pattern for each category, read:\n- **`references/batching-categories.md`** - Category A, B, C with full before/after code\n- **`references/flushSync-guide.md`** - when to use flushSync, when NOT to, import syntax\n\n## The flushSync Rule\n\n**Use `flushSync` sparingly.** It forces a synchronous re-render, bypassing React 18's concurrent scheduler. Overusing it negates the performance benefits of React 18.\n\nOnly use `flushSync` when:\n- The user must see an intermediate UI state before an async operation begins\n- A spinner/loading state must render before a fetch starts\n- Sequential UI steps have distinct visible states (progress wizard, multi-step flow)\n\nIn 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.","tags":["react18","batching","patterns","awesome","copilot","github","agent-skills","agents","custom-agents","github-copilot","hacktoberfest","prompt-engineering"],"capabilities":["skill","source-github","skill-react18-batching-patterns","topic-agent-skills","topic-agents","topic-awesome","topic-custom-agents","topic-github-copilot","topic-hacktoberfest","topic-prompt-engineering"],"categories":["awesome-copilot"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/github/awesome-copilot/react18-batching-patterns","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add github/awesome-copilot","source_repo":"https://github.com/github/awesome-copilot","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 30743 github stars · SKILL.md body (1,911 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T00:52:15.934Z","embedding":null,"createdAt":"2026-04-18T21:50:53.762Z","updatedAt":"2026-04-22T00:52:15.934Z","lastSeenAt":"2026-04-22T00:52:15.934Z","tsv":"'17':80 '18':17,50,67,82,236,248 'addeventlisten':110 'approach':310 'ask':148 'async':33,145,263 'async/await':103 'automat':12,51 'await':154,165,304 'b':190,205 'batch':3,13,52,86,87,94,102,108,116,117 'before/after':209 'begin':265 'benefit':245 'break':63 'bug':173 'bypass':234 'c':185,206 'call':30,121 'callback':111 'case':290 'catch':42,97 'categori':167,184,189,200,203,312 'chang':64,75 'class':18,25,70,146 'class-compon':69 'code':151,161,210,298 'codebas':72 'compon':19,26,71 'concurr':238 'context':125 'core':74 'correct':309 'danger':61 'decis':160 'diagnos':9,56 'diagnosi':142 'distinct':279 'end':136 'event':47,84 'everi':144 'exact':6 'execut':124 'fetch':273 'fix':11,58,292 'flow':287 'flush':126 'flushsync':186,193,215,222,225,251 'forc':228 'full':196,208 'h':48 'handler':85 'immedi':90,98,104,112 'import':219 'insid':35,37 'intermedi':138,176,258 'locat':76 'make':158 'mean':118 'method':34,147 'multi':285 'multi-step':284 'multipl':28 'must':178,255,269 'nativ':46,109 'need':187 'negat':242 'occur':140 'oper':264 'overus':240 'pattern':4,7,53,197 'per':311 'perform':244 'progress':282 'promis':39,95 'provid':5 'quick':141 're':92,100,106,114,132,232 're-rend':91,99,105,113,131,231 'react':16,49,66,79,81,83,235,247 'react18':2 'react18-batching-patterns':1 'read':143,155,162,172,201,301,305 'refactor':191,295 'refer':54 'references/batching-categories.md':202,306 'references/flushsync-guide.md':211 'regress':14 'render':93,101,107,115,133,139,177,233,270 'restructur':296 'rule':223 'schedul':239 'see':256 'sequenti':275 'setstat':29,78,120 'settimeout':36,89 'silent':62,169 'singl':130 'skill':22 'skill-react18-batching-patterns' 'source-github' 'spare':226 'spinner/loading':267 'start':274 'state':171,260,268,281 'state-read':170 'step':277,286 'synchron':230 'syntax':220 'this.state':156,163,302 'togeth':127 'topic-agent-skills' 'topic-agents' 'topic-awesome' 'topic-custom-agents' 'topic-github-copilot' 'topic-hacktoberfest' 'topic-prompt-engineering' 'ui':259,276 'use':20,214,224,250 'user':182,254 'visibl':180,280 'whenev':23 'within':122 'wizard':283 'yes':166,183","prices":[{"id":"2315620d-7a69-4e75-b095-336a121d79fa","listingId":"904e05b8-d4c4-4d37-bd5f-fc9857622516","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"github","category":"awesome-copilot","install_from":"skills.sh"},"createdAt":"2026-04-18T21:50:53.762Z"}],"sources":[{"listingId":"904e05b8-d4c4-4d37-bd5f-fc9857622516","source":"github","sourceId":"github/awesome-copilot/react18-batching-patterns","sourceUrl":"https://github.com/github/awesome-copilot/tree/main/skills/react18-batching-patterns","isPrimary":false,"firstSeenAt":"2026-04-18T21:50:53.762Z","lastSeenAt":"2026-04-22T00:52:15.934Z"}],"details":{"listingId":"904e05b8-d4c4-4d37-bd5f-fc9857622516","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"github","slug":"react18-batching-patterns","github":{"repo":"github/awesome-copilot","stars":30743,"topics":["agent-skills","agents","ai","awesome","custom-agents","github-copilot","hacktoberfest","prompt-engineering"],"license":"mit","html_url":"https://github.com/github/awesome-copilot","pushed_at":"2026-04-21T22:20:21Z","description":"Community-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.","skill_md_sha":"28e343eff80da43895b4ccb8062442bd93dd7c86","skill_md_path":"skills/react18-batching-patterns/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/github/awesome-copilot/tree/main/skills/react18-batching-patterns"},"layout":"multi","source":"github","category":"awesome-copilot","frontmatter":{"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."},"skills_sh_url":"https://skills.sh/github/awesome-copilot/react18-batching-patterns"},"updatedAt":"2026-04-22T00:52:15.934Z"}}