logoESLint React
Rules

no-string-refs

Full Name in eslint-plugin-react-x

react-x/no-string-refs

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-string-refs

Features

🔄

Presets

  • x
  • recommended
  • recommended-typescript
  • recommended-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 of createRef() in function components.

On this page