react/no-string-refs Correctness

✅ This rule is turned on by default.

What it does

This rule prevents using string literals in ref attributes.

Why is this bad?

Using string literals in ref attributes is deprecated in React.

Example

Examples of incorrect code for this rule:

var Hello = createReactClass({
  render: function () {
    return <div ref="hello">Hello, world.</div>;
  },
});

var Hello = createReactClass({
  componentDidMount: function () {
    var component = this.refs.hello;
    // ...do something with component
  },
  render: function () {
    return <div ref="hello">Hello, world.</div>;
  },
});

Examples of correct code for this rule:

var Hello = createReactClass({
  componentDidMount: function () {
    var component = this.hello;
    // ...do something with component
  },
  render() {
    return (
      <div
        ref={(c) => {
          this.hello = c;
        }}
      >
        Hello, world.
      </div>
    );
  },
});

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny react/no-string-refs

Config (.oxlintrc.json)

{
  "rules": {
    "react/no-string-refs": "error"
  }
}

References

• Rule Source