{"id":"eb5a1b62-1d2b-4b0c-b2c4-d4870324f4c4","shortId":"qPNYAS","kind":"skill","title":"react18-lifecycle-patterns","tagline":"Provides exact before/after migration patterns for the three unsafe class component lifecycle methods - componentWillMount, componentWillReceiveProps, and componentWillUpdate - targeting React 18.3.1. Use this skill whenever a class component needs its lifecycle methods migrated,","description":"# React 18 Lifecycle Patterns\n\nReference for migrating the three unsafe class component lifecycle methods to React 18.3.1 compliant patterns.\n\n## Quick Decision Guide\n\nBefore migrating any lifecycle method, identify the **semantic category** of what the method does. Wrong category = wrong migration. The table below routes you to the correct reference file.\n\n### componentWillMount - what does it do?\n\n| What it does | Correct migration | Reference |\n|---|---|---|\n| Sets initial state (`this.setState(...)`) | Move to `constructor` | [→ componentWillMount.md](references/componentWillMount.md#case-a) |\n| Runs a side effect (fetch, subscription, DOM) | Move to `componentDidMount` | [→ componentWillMount.md](references/componentWillMount.md#case-b) |\n| Derives initial state from props | Move to `constructor` with props | [→ componentWillMount.md](references/componentWillMount.md#case-c) |\n\n### componentWillReceiveProps - what does it do?\n\n| What it does | Correct migration | Reference |\n|---|---|---|\n| Async side effect triggered by prop change (fetch, cancel) | `componentDidUpdate` | [→ componentWillReceiveProps.md](references/componentWillReceiveProps.md#case-a) |\n| Pure state derivation from new props (no side effects) | `getDerivedStateFromProps` | [→ componentWillReceiveProps.md](references/componentWillReceiveProps.md#case-b) |\n\n### componentWillUpdate - what does it do?\n\n| What it does | Correct migration | Reference |\n|---|---|---|\n| Reads the DOM before update (scroll, size, position) | `getSnapshotBeforeUpdate` | [→ componentWillUpdate.md](references/componentWillUpdate.md#case-a) |\n| Cancels requests / runs effects before update | `componentDidUpdate` with prev comparison | [→ componentWillUpdate.md](references/componentWillUpdate.md#case-b) |\n\n---\n\n## The UNSAFE_ Prefix Rule\n\n**Never use `UNSAFE_componentWillMount`, `UNSAFE_componentWillReceiveProps`, or `UNSAFE_componentWillUpdate` as a permanent fix.**\n\nPrefixing suppresses the React 18.3.1 warning but does NOT:\n- Fix concurrent mode safety issues\n- Prepare the codebase for React 19 (where these are removed, with or without the prefix)\n- Fix the underlying semantic problem the migration is meant to address\n\nThe UNSAFE_ prefix is only appropriate as a temporary hold while scheduling the real migration sprint. Mark any UNSAFE_ prefix additions with:\n```jsx\n// TODO: React 19 will remove this. Migrate before React 19 upgrade.\n// UNSAFE_ prefix added temporarily - replace with componentDidMount / getDerivedStateFromProps / etc.\n```\n\n---\n\n## Reference Files\n\nRead the full reference file for the lifecycle method you are migrating:\n\n- **`references/componentWillMount.md`** - 3 cases with full before/after code\n- **`references/componentWillReceiveProps.md`** - getDerivedStateFromProps trap warnings, full examples\n- **`references/componentWillUpdate.md`** - getSnapshotBeforeUpdate + componentDidUpdate pairing\n\nRead the relevant file before writing any migration code.","tags":["react18","lifecycle","patterns","awesome","copilot","github","agent-skills","agents","custom-agents","github-copilot","hacktoberfest","prompt-engineering"],"capabilities":["skill","source-github","skill-react18-lifecycle-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-lifecycle-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,967 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.169Z","embedding":null,"createdAt":"2026-04-18T21:50:56.747Z","updatedAt":"2026-04-22T00:52:16.169Z","lastSeenAt":"2026-04-22T00:52:16.169Z","tsv":"'18':38 '18.3.1':24,53,242 '19':257,303,310 '3':336 'ad':314 'addit':298 'address':277 'appropri':283 'async':151 'b':124,180,220 'before/after':7,340 'c':139 'cancel':159,206 'case':108,123,138,164,179,204,219,337 'case-a':107,163,203 'case-b':122,178,218 'case-c':137 'categori':67,74 'chang':157 'class':14,30,47 'code':341,360 'codebas':254 'comparison':215 'compliant':54 'compon':15,31,48 'componentdidmount':119,318 'componentdidupd':160,212,350 'componentwillmount':18,87,228 'componentwillmount.md':105,120,135 'componentwillreceiveprop':19,140,230 'componentwillreceiveprops.md':161,176 'componentwillupd':21,181,233 'componentwillupdate.md':201,216 'concurr':248 'constructor':104,132 'correct':84,95,148,189 'decis':57 'deriv':125,168 'dom':116,194 'effect':113,153,174,209 'etc':320 'exact':6 'exampl':347 'fetch':114,158 'file':86,322,327,355 'fix':237,247,267 'full':325,339,346 'getderivedstatefromprop':175,319,343 'getsnapshotbeforeupd':200,349 'guid':58 'hold':287 'identifi':64 'initi':99,126 'issu':251 'jsx':300 'lifecycl':3,16,34,39,49,62,330 'mark':294 'meant':275 'method':17,35,50,63,71,331 'migrat':8,36,43,60,76,96,149,190,273,292,307,334,359 'mode':249 'move':102,117,130 'need':32 'never':225 'new':170 'pair':351 'pattern':4,9,40,55 'perman':236 'posit':199 'prefix':223,238,266,280,297,313 'prepar':252 'prev':214 'problem':271 'prop':129,134,156,171 'provid':5 'pure':166 'quick':56 'react':23,37,52,241,256,302,309 'react18':2 'react18-lifecycle-patterns':1 'read':192,323,352 'real':291 'refer':41,85,97,150,191,321,326 'references/componentwillmount.md':106,121,136,335 'references/componentwillreceiveprops.md':162,177,342 'references/componentwillupdate.md':202,217,348 'relev':354 'remov':261,305 'replac':316 'request':207 'rout':80 'rule':224 'run':110,208 'safeti':250 'schedul':289 'scroll':197 'semant':66,270 'set':98 'side':112,152,173 'size':198 'skill':27 'skill-react18-lifecycle-patterns' 'source-github' 'sprint':293 'state':100,127,167 'subscript':115 'suppress':239 'tabl':78 'target':22 'temporari':286 'temporarili':315 'this.setstate':101 'three':12,45 'todo':301 'topic-agent-skills' 'topic-agents' 'topic-awesome' 'topic-custom-agents' 'topic-github-copilot' 'topic-hacktoberfest' 'topic-prompt-engineering' 'trap':344 'trigger':154 'under':269 'unsaf':13,46,222,227,229,232,279,296,312 'updat':196,211 'upgrad':311 'use':25,226 'warn':243,345 'whenev':28 'without':264 'write':357 'wrong':73,75","prices":[{"id":"91353fb8-d6a1-41f8-817a-31664e5cade9","listingId":"eb5a1b62-1d2b-4b0c-b2c4-d4870324f4c4","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:56.747Z"}],"sources":[{"listingId":"eb5a1b62-1d2b-4b0c-b2c4-d4870324f4c4","source":"github","sourceId":"github/awesome-copilot/react18-lifecycle-patterns","sourceUrl":"https://github.com/github/awesome-copilot/tree/main/skills/react18-lifecycle-patterns","isPrimary":false,"firstSeenAt":"2026-04-18T21:50:56.747Z","lastSeenAt":"2026-04-22T00:52:16.169Z"}],"details":{"listingId":"eb5a1b62-1d2b-4b0c-b2c4-d4870324f4c4","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"github","slug":"react18-lifecycle-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":"3e0b109924157bac7b8fccea6f76602a6ed2f7d5","skill_md_path":"skills/react18-lifecycle-patterns/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/github/awesome-copilot/tree/main/skills/react18-lifecycle-patterns"},"layout":"multi","source":"github","category":"awesome-copilot","frontmatter":{"name":"react18-lifecycle-patterns","description":"Provides exact before/after migration patterns for the three unsafe class component lifecycle methods - componentWillMount, componentWillReceiveProps, and componentWillUpdate - targeting React 18.3.1. Use this skill whenever a class component needs its lifecycle methods migrated, when deciding between getDerivedStateFromProps vs componentDidUpdate, when adding getSnapshotBeforeUpdate, or when fixing React 18 UNSAFE_ lifecycle warnings. Always use this skill before writing any lifecycle migration code - do not guess the pattern from memory, the decision trees here prevent the most common migration mistakes."},"skills_sh_url":"https://skills.sh/github/awesome-copilot/react18-lifecycle-patterns"},"updatedAt":"2026-04-22T00:52:16.169Z"}}