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>
    );
  },
});

References

• Rule Source