Plugin: react-featuresRules
no-string-refs
no-string-refs rule
no-string-refs rule
Prevent string refs in React components (deprecated pattern). This rule is part of eslint-plugin-react-features.
Quick Summary
| Aspect | Details |
|---|---|
| Severity | Error (deprecated) |
| Auto-Fix | ❌ No (requires refactoring) |
| Category | React |
| ESLint MCP | ✅ Optimized for ESLint MCP integration |
| Best For | All React projects |
Rule Details
String refs (ref="myRef") are deprecated and have issues. Use createRef or useRef instead.
Why This Matters
| Issue | Impact | Solution |
|---|---|---|
| ⚠️ Deprecated | Will be removed | useRef/createRef |
| 🔗 Owner issues | Wrong component gets ref | Callback refs |
| 🧪 Static analysis | Can't be type-checked | Typed refs |
Examples
❌ Incorrect
class MyComponent extends React.Component {
render() {
return <input ref="myInput" />; // String ref
}
focusInput() {
this.refs.myInput.focus(); // Using string ref
}
}✅ Correct
// Class component with createRef
class MyComponent extends React.Component {
inputRef = React.createRef<HTMLInputElement>();
render() {
return <input ref={this.inputRef} />;
}
focusInput() {
this.inputRef.current?.focus();
}
}
// Function component with useRef
function MyComponent() {
const inputRef = useRef<HTMLInputElement>(null);
const focusInput = () => inputRef.current?.focus();
return <input ref={inputRef} />;
}
// Callback ref
<input ref={(el) => { this.inputRef = el; }} />Configuration Examples
Basic Usage
{
rules: {
'react-features/no-string-refs': 'error'
}
}Related Rules
react-class-to-hooks- Migrate to hooks
Further Reading
- Refs and the DOM - React docs
- useRef Hook - useRef reference
Known False Negatives
- A string held in a variable:
const name = 'input'; <input ref={name} />is not traced. - An alias of
this(const self = this; self.refs.input) is not read.
Not reported by design: this.refs on a class that is not a React component, and another object's refs.
Use this rule
npm install -D oxlint-plugin-react-features{ "jsPlugins": ["oxlint-plugin-react-features"], "rules": { "react-features/no-string-refs": "error" }}import { defineConfig } from 'vite-plus';export default defineConfig({ lint: { jsPlugins: ['oxlint-plugin-react-features'], rules: { 'react-features/no-string-refs': 'error', }, },});oxlint-plugin-react-features re-exports eslint-plugin-react-features/oxlint: the same rules under the same IDs, and no ESLint install. Why oxlint.
Did this rule catch something? Star the repo to get new CWE coverage as we ship it — or follow the AI-code-security benchmarks behind these rules.