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

Rule Source
Test Source