Rules
no-string-refs
Full Name in eslint-plugin-react-x
react-x/no-string-refsFull Name in @eslint-react/eslint-plugin
@eslint-react/no-string-refsFeatures
🔄
Presets
xrecommendedrecommended-typescriptrecommended-type-checked
Description
Replaces string refs with callback refs.
String refs are deprecated in React. Use callback refs instead.
Examples
Before
import React from "react";
class Input extends React.Component {
focus = () => {
this.refs.input.focus();
};
render() {
return <input ref="input" />;
}
}After
import React from "react";
class Input extends React.Component {
focus = () => {
this.refs.input.focus();
};
render() {
// dprint-ignore
return <input ref={ref => { this.refs.input = ref; }} />;
}
}Implementation
See Also
no-create-ref
Prevents usage ofcreateRef()in function components.