react/no-string-refs

• Category: Correctness
• Severity: warn
• Source: oxlint-builtin:react
• Framework: global
• Enabled when: always (unless customRulesOnly=true)
• Documentation: https://oxc.rs/docs/guide/usage/linter/rules/react/no-string-refs.html

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires on string-literal ref attributes (<div ref="hello" />) and on this.refs.<name> member reads — the legacy string-ref API removed in React 19. With noTemplateLiterals: true it also flags template-literal refs like ref={hello}. False positive: an uppercase custom component <Foo ref="hello" /> where the consumer treats ref as a plain string identifier rather than a React ref — rare but possible since the rule does not distinguish DOM elements from components.

Fix prompt

Use this once validation confirms the diagnostic is real.

In class components, store the ref via createRef: this.helloRef = createRef() in the constructor, ref={this.helloRef} on the JSX, this.helloRef.current to read. In function components use useRef(null) and accept ref as a normal prop (React 19+) or wrap with forwardRef (React 16-18). Callback refs (ref={(el) => { this.hello = el }}) also work. See https://oxc.rs/docs/guide/usage/linter/rules/react/no-string-refs.html and https://react.dev/reference/react/createRef