56 results available
Sign in
Skills directory

react18-string-refs

github

·

Last changed
Hardened

This skill has been hardened by Chainguard

Last changed

This version passed the hardening gate. Hardening applied 2 targeted changes and preserved all other text. Classified findings before hardening: 0. Classified findings closed: 0. Classified findings remaining: 0. Unclassified scanner findings remaining: 0. Review findings closed: 2. Review findings remaining: 6.

Open before hardening

None

Open after hardening

None

Expand
File
Group
Subtype
Severity
Status

No findings available

0 findings

SKILL.md

React 18 String Refs Migration

String refs (ref="myInput" + this.refs.myInput) were deprecated in React 16.3, warn in React 18.3.1, and are removed in React 19.

Quick Pattern Map

PatternReference

Single ref on a DOM element

→ patterns.md#single-ref

Multiple refs in one component

→ patterns.md#multiple-refs

Refs in a list / dynamic refs

→ patterns.md#list-refs

Callback refs (alternative approach)

→ patterns.md#callback-refs

Ref passed to a child component

→ patterns.md#forwarded-refs

Scan Command

# Find all string ref assignments in JSX
grep -rn 'ref="' src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

# Find all this.refs accessors
grep -rn "this\.refs\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

Both should be migrated together - find the ref="name" and the this.refs.name accesses for each component as a pair.

The Migration Rule

Every string ref migrates to React.createRef():

  1. Add refName = React.createRef(); as a class field (or in constructor)
  2. Replace ref="refName" → ref={this.refName} in JSX
  3. Replace this.refs.refName → this.refName.current

Read references/patterns.md for the full before/after for each case.

Install

Install with chainctl
chainctl skill install public/github/react18-string-refs:latest
Get started with chainctl
View source

Harden your own skills

Bring Chainguard's hardening pipeline to your first-party skills — custom rulesets, automated remediation, full audit trail.

Provenance

Upstream sourcehttps://github.com/github/awesome-copilot
Upstream commit2201a49dd6f972ac4f685d03361d58c9c9206690
OCI reference

skills.chainreg.biz/public/github.com/github/skills/react18-string-refs:latest

License

MIT

Files

HARDENING.md

LICENSE

SKILL.md

references/patterns.md

The trusted source for open source

Talk to an expert
PrivacyTerms

Product

Chainguard ContainersChainguard LibrariesChainguard VMsChainguard OS PackagesChainguard ActionsChainguard Agent SkillsIntegrationsPricing

Solutions

FedRAMPPCI DSSCMMC 2.0SOC 2Golden ImagesCVE RemediationPublic SectorStartups

Customers

Customer StoriesChainguard Reviews

Resources

Events & WebinarsSupply Chain Security 101Chainguard CoursesDocumentationTrust CenterChainguard Slack Community

Company

About UsBlogOpen Source LeadershipPartnersNewsroomCareersLegal
© 2026 Chainguard, Inc. All Rights Reserved.
Chainguard® and the Chainguard logo are registered trademarks of Chainguard, Inc. in the United States and/or other countries.
The other respective trademarks mentioned on this page are owned by the respective companies and use of them does not imply any affiliation or endorsement.