{"id":"bb239992-6b42-4414-b335-ecd86d7d9323","shortId":"FS9B4h","kind":"skill","title":"react19-concurrent-patterns","tagline":"Preserve React 18 concurrent patterns and adopt React 19 APIs (useTransition, useDeferredValue, Suspense, use(), useOptimistic, Actions) during migration.","description":"# React 19 Concurrent Patterns\n\nReact 19 introduced new APIs that complement the migration work. This skill covers two concerns:\n\n1. **Preserve**  existing React 18 concurrent patterns that must not be broken during migration\n2. **Adopt**  new React 19 APIs worth introducing after migration stabilizes\n\n## Part 1  Preserve: React 18 Concurrent Patterns That Must Survive the Migration\n\nThese patterns exist in React 18 codebases and must not be accidentally removed or broken:\n\n### createRoot  Already Migrated by the R18 Orchestra\n\nIf the R18 orchestra already ran, `ReactDOM.render` → `createRoot` is done. Verify it's correct:\n\n```jsx\n// CORRECT React 19 root (same as React 18):\nimport { createRoot } from 'react-dom/client';\nconst root = createRoot(document.getElementById('root'));\nroot.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);\n```\n\n### useTransition  No Migration Needed\n\n`useTransition` from React 18 works identically in React 19. Do not touch these patterns during migration:\n\n```jsx\n// React 18 useTransition  unchanged in React 19:\nconst [isPending, startTransition] = useTransition();\n\nfunction handleClick() {\n  startTransition(() => {\n    setFilteredResults(computeExpensiveFilter(input));\n  });\n}\n```\n\n### useDeferredValue  No Migration Needed\n\n```jsx\n// React 18 useDeferredValue  unchanged in React 19:\nconst deferredQuery = useDeferredValue(query);\n```\n\n### Suspense for Code Splitting  No Migration Needed\n\n```jsx\n// React 18 Suspense with lazy  unchanged in React 19:\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction App() {\n  return (\n    <Suspense fallback={<Spinner />}>\n      <LazyComponent />\n    </Suspense>\n  );\n}\n```\n\n---\n\n## Part 2  React 19 New APIs\n\nThese are worth adopting in a post-migration cleanup sprint. Do not introduce these DURING the migration  stabilize first.\n\nFor full patterns on each new API, read:\n- **`references/react19-use.md`**  the `use()` hook for promises and context\n- **`references/react19-actions.md`**  Actions, useActionState, useFormStatus, useOptimistic\n- **`references/react19-suspense.md`**  Suspense for data fetching (the new pattern)\n\n## Migration Safety Rules\n\nDuring the React 19 migration itself, these concurrent-mode patterns must be **left completely untouched**:\n\n```bash\n# Verify nothing touched these during migration:\ngrep -rn \"useTransition\\|useDeferredValue\\|Suspense\\|startTransition\" \\\n  src/ --include=\"*.js\" --include=\"*.jsx\" | grep -v \"\\.test\\.\"\n```\n\nIf the migrator touched any of these files, review the changes  the migration should only have modified React API surface (forwardRef, defaultProps, etc.), never concurrent mode logic.","tags":["react19","concurrent","patterns","awesome","copilot","github","agent-skills","agents","custom-agents","github-copilot","hacktoberfest","prompt-engineering"],"capabilities":["skill","source-github","skill-react19-concurrent-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/react19-concurrent-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 (2,674 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:16.258Z","embedding":null,"createdAt":"2026-04-18T21:50:58.264Z","updatedAt":"2026-04-22T00:52:16.258Z","lastSeenAt":"2026-04-22T00:52:16.258Z","tsv":"'/client':130 '/lazycomponent':212 '1':42,68 '18':7,46,71,84,123,144,159,181,200 '19':13,24,28,60,118,149,164,186,207,221,279 '2':56,219 'accident':90 'action':20,261 'adopt':11,57,227 'alreadi':95,105 'api':14,31,61,223,250,331 'app':214 'bash':292 'broken':53,93 'chang':323 'cleanup':233 'code':193 'codebas':85 'complement':33 'complet':290 'computeexpensivefilt':173 'concern':41 'concurr':3,8,25,47,72,284,337 'concurrent-mod':283 'const':131,165,187,208 'context':259 'correct':114,116 'cover':39 'createroot':94,108,125,133 'data':268 'defaultprop':334 'deferredqueri':188 'document.getelementbyid':134 'dom':129 'done':110 'etc':335 'exist':44,81 'fallback':217 'fetch':269 'file':320 'first':243 'forwardref':333 'full':245 'function':169,213 'grep':299,310 'handleclick':170 'hook':255 'ident':146 'import':124,211 'includ':306,308 'input':174 'introduc':29,63,237 'ispend':166 'js':307 'jsx':115,157,179,198,309 'lazi':203 'lazycompon':209 'left':289 'logic':339 'migrat':22,35,55,65,78,96,139,156,177,196,232,241,273,280,298,315,325 'mode':285,338 'modifi':329 'must':50,75,87,287 'need':140,178,197 'never':336 'new':30,58,222,249,271 'noth':294 'orchestra':100,104 'part':67,218 'pattern':4,9,26,48,73,80,154,246,272,286 'post':231 'post-migr':230 'preserv':5,43,69 'promis':257 'queri':190 'r18':99,103 'ran':106 'react':6,12,23,27,45,59,70,83,117,122,128,143,148,158,163,180,185,199,206,220,278,330 'react-dom':127 'react.lazy':210 'react19':2 'react19-concurrent-patterns':1 'reactdom.render':107 'read':251 'references/react19-actions.md':260 'references/react19-suspense.md':265 'references/react19-use.md':252 'remov':91 'return':215 'review':321 'rn':300 'root':119,132,135 'root.render':136 'rule':275 'safeti':274 'setfilteredresult':172 'skill':38 'skill-react19-concurrent-patterns' 'source-github' 'split':194 'sprint':234 'src':305 'stabil':66,242 'starttransit':167,171,304 'surfac':332 'surviv':76 'suspens':17,191,201,216,266,303 'test':312 'topic-agent-skills' 'topic-agents' 'topic-awesome' 'topic-custom-agents' 'topic-github-copilot' 'topic-hacktoberfest' 'topic-prompt-engineering' 'touch':152,295,316 'two':40 'unchang':161,183,204 'untouch':291 'use':18,254 'useactionst':262 'usedeferredvalu':16,175,182,189,302 'useformstatus':263 'useoptimist':19,264 'usetransit':15,137,141,160,168,301 'v':311 'verifi':111,293 'work':36,145 'worth':62,226","prices":[{"id":"1bfdd8d6-3ac7-4fe2-887b-b874714e96d5","listingId":"bb239992-6b42-4414-b335-ecd86d7d9323","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:58.264Z"}],"sources":[{"listingId":"bb239992-6b42-4414-b335-ecd86d7d9323","source":"github","sourceId":"github/awesome-copilot/react19-concurrent-patterns","sourceUrl":"https://github.com/github/awesome-copilot/tree/main/skills/react19-concurrent-patterns","isPrimary":false,"firstSeenAt":"2026-04-18T21:50:58.264Z","lastSeenAt":"2026-04-22T00:52:16.258Z"}],"details":{"listingId":"bb239992-6b42-4414-b335-ecd86d7d9323","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"github","slug":"react19-concurrent-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":"55f61d0f0d2b6289c262a7edcf729b77b857acb3","skill_md_path":"skills/react19-concurrent-patterns/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/github/awesome-copilot/tree/main/skills/react19-concurrent-patterns"},"layout":"multi","source":"github","category":"awesome-copilot","frontmatter":{"name":"react19-concurrent-patterns","description":"Preserve React 18 concurrent patterns and adopt React 19 APIs (useTransition, useDeferredValue, Suspense, use(), useOptimistic, Actions) during migration."},"skills_sh_url":"https://skills.sh/github/awesome-copilot/react19-concurrent-patterns"},"updatedAt":"2026-04-22T00:52:16.258Z"}}