{"id":"1aadea03-5a11-4403-bbad-0e1838ae85e3","shortId":"XTRy4L","kind":"skill","title":"react18-string-refs","tagline":"Provides exact migration patterns for React string refs (ref=\"name\" + this.refs.name) to React.createRef() in class components. Use this skill whenever migrating string ref usage - including single element refs, multiple refs in a component, refs in lists, callback refs, and refs","description":"# React 18 String Refs Migration\n\nString refs (`ref=\"myInput\"` + `this.refs.myInput`) were deprecated in React 16.3, warn in React 18.3.1, and are **removed in React 19**.\n\n## Quick Pattern Map\n\n| Pattern | Reference |\n|---|---|\n| Single ref on a DOM element | [→ patterns.md#single-ref](references/patterns.md#single-ref) |\n| Multiple refs in one component | [→ patterns.md#multiple-refs](references/patterns.md#multiple-refs) |\n| Refs in a list / dynamic refs | [→ patterns.md#list-refs](references/patterns.md#list-refs) |\n| Callback refs (alternative approach) | [→ patterns.md#callback-refs](references/patterns.md#callback-refs) |\n| Ref passed to a child component | [→ patterns.md#forwarded-refs](references/patterns.md#forwarded-refs) |\n\n## Scan Command\n\n```bash\n# Find all string ref assignments in JSX\ngrep -rn 'ref=\"' src/ --include=\"*.js\" --include=\"*.jsx\" | grep -v \"\\.test\\.\"\n\n# Find all this.refs accessors\ngrep -rn \"this\\.refs\\.\" src/ --include=\"*.js\" --include=\"*.jsx\" | grep -v \"\\.test\\.\"\n```\n\nBoth should be migrated together - find the `ref=\"name\"` and the `this.refs.name` accesses for each component as a pair.\n\n## The Migration Rule\n\nEvery string ref migrates to `React.createRef()`:\n\n1. Add `refName = React.createRef();` as a class field (or in constructor)\n2. Replace `ref=\"refName\"` → `ref={this.refName}` in JSX\n3. Replace `this.refs.refName` → `this.refName.current` everywhere\n\nRead `references/patterns.md` for the full before/after for each case.","tags":["react18","string","refs","awesome","copilot","github","agent-skills","agents","custom-agents","github-copilot","hacktoberfest","prompt-engineering"],"capabilities":["skill","source-github","skill-react18-string-refs","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-string-refs","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,478 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.223Z","embedding":null,"createdAt":"2026-04-18T21:50:57.504Z","updatedAt":"2026-04-22T00:52:16.223Z","lastSeenAt":"2026-04-22T00:52:16.223Z","tsv":"'1':207 '16.3':59 '18':46 '18.3.1':63 '19':69 '2':218 '3':226 'access':191 'accessor':166 'add':208 'altern':118 'approach':119 'assign':149 'bash':144 'before/after':236 'callback':41,116,122,126 'callback-ref':121,125 'case':239 'child':132 'class':19,213 'command':143 'compon':20,37,93,133,194 'constructor':217 'deprec':56 'dom':79 'dynam':106 'element':31,80 'everi':201 'everywher':230 'exact':6 'field':214 'find':145,163,184 'forward':136,140 'forwarded-ref':135,139 'full':235 'grep':152,160,167,176 'includ':29,156,158,172,174 'js':157,173 'jsx':151,159,175,225 'list':40,105,110,114 'list-ref':109,113 'map':72 'migrat':7,25,49,182,199,204 'multipl':33,89,96,100 'multiple-ref':95,99 'myinput':53 'name':14,187 'one':92 'pair':197 'pass':129 'pattern':8,71,73 'patterns.md':81,94,108,120,134 'provid':5 'quick':70 'react':10,45,58,62,68 'react.createref':17,206,210 'react18':2 'react18-string-refs':1 'read':231 'ref':4,12,13,27,32,34,38,42,44,48,51,52,76,84,88,90,97,101,102,107,111,115,117,123,127,128,137,141,148,154,170,186,203,220,222 'refer':74 'references/patterns.md':85,98,112,124,138,232 'refnam':209,221 'remov':66 'replac':219,227 'rn':153,168 'rule':200 'scan':142 'singl':30,75,83,87 'single-ref':82,86 'skill':23 'skill-react18-string-refs' 'source-github' 'src':155,171 'string':3,11,26,47,50,147,202 'test':162,178 'this.refname':223 'this.refname.current':229 'this.refs':165 'this.refs.myinput':54 'this.refs.name':15,190 'this.refs.refname':228 'togeth':183 'topic-agent-skills' 'topic-agents' 'topic-awesome' 'topic-custom-agents' 'topic-github-copilot' 'topic-hacktoberfest' 'topic-prompt-engineering' 'usag':28 'use':21 'v':161,177 'warn':60 'whenev':24","prices":[{"id":"b5e9f309-570a-4212-82c0-080312dcf22a","listingId":"1aadea03-5a11-4403-bbad-0e1838ae85e3","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:57.504Z"}],"sources":[{"listingId":"1aadea03-5a11-4403-bbad-0e1838ae85e3","source":"github","sourceId":"github/awesome-copilot/react18-string-refs","sourceUrl":"https://github.com/github/awesome-copilot/tree/main/skills/react18-string-refs","isPrimary":false,"firstSeenAt":"2026-04-18T21:50:57.504Z","lastSeenAt":"2026-04-22T00:52:16.223Z"}],"details":{"listingId":"1aadea03-5a11-4403-bbad-0e1838ae85e3","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"github","slug":"react18-string-refs","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":"48c516d17ec865cc715fa7daaec150fed43f62cb","skill_md_path":"skills/react18-string-refs/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/github/awesome-copilot/tree/main/skills/react18-string-refs"},"layout":"multi","source":"github","category":"awesome-copilot","frontmatter":{"name":"react18-string-refs","description":"Provides exact migration patterns for React string refs (ref=\"name\" + this.refs.name) to React.createRef() in class components. Use this skill whenever migrating string ref usage - including single element refs, multiple refs in a component, refs in lists, callback refs, and refs passed to child components. Always use this skill before writing any ref migration code - the multiple-refs-in-list pattern is particularly tricky and this skill prevents the most common mistakes. Use it for React 18.3.1 migration (string refs warn) and React 19 migration (string refs removed)."},"skills_sh_url":"https://skills.sh/github/awesome-copilot/react18-string-refs"},"updatedAt":"2026-04-22T00:52:16.223Z"}}