Question 1

How do I migrate React string refs to createRef?

Accepted Answer

Add a class field like myRef = React.createRef(), replace ref="myRef" with ref={this.myRef} in JSX, and change this.refs.myRef to this.myRef.current everywhere. Migrate the JSX assignment and the this.refs accessors together as a pair.

Question 2

How to convert string refs inside a map or list in React?

Accepted Answer

Store refs in a Map keyed by item id, creating each ref lazily with React.createRef(). Alternatively use a callback ref that stores DOM nodes directly in an object, noting that callback refs hold the element itself, not a .current wrapper.

Question 3

Are string refs removed in React 19?

Accepted Answer

Yes, string refs were deprecated in React 16.3, produce warnings in React 18.3.1, and are removed in React 19. All ref="name" and this.refs.name usage must be migrated to createRef or callback refs before upgrading.

Question 4

When should I use callback refs instead of createRef?

Accepted Answer

Use createRef for a fixed number of refs known at component definition time. Use callback refs for dynamic lists, when you need to react to attach/detach, or when the ref target may change. Avoid inline callback refs since they recreate the function every render.

Question 5

How do I pass a ref to a child component in React 18 vs React 19?

Accepted Answer

In React 18, wrap the child in forwardRef so it can receive and attach the ref to a DOM node. In React 19, ref is passed as a regular prop and forwardRef is no longer needed.

react18-string-refs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Core Features & Use Cases

Quick Start

Frequently Asked Questions about react18-string-refs

Related Skills

react-class-to-functional

migrating-from-forwardref

class-to-hooks

hiddink-harness:audit-agents