noReactStringRefs (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.4.14
Diagnostic Category: lint/suspicious/noReactStringRefs
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- react
Sources:
- Same as react/no-string-refs

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "suspicious": {
5
        "noReactStringRefs": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow string refs in React components.

String refs are a legacy React feature. Modern React code should use callback refs, createRef(), or useRef() instead.

Biome also flags template literal refs, even though upstream only does so through an option.

Examples

Invalid

1
function Hello() {
2
  return <div ref="hello">Hello</div>;
3
}

code-block.jsx:2:19 lint/suspicious/noReactStringRefs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ String refs are deprecated.
  
    1 │ function Hello() {
  > 2 │   return <div ref="hello">Hello</div>;
      │                   ^^^^^^^
    3 │ }
    4 │ 
  
  ℹ String refs are a legacy React feature that can make ref usage harder to follow.
  
  ℹ Use a callback ref or an object ref created with createRef() or useRef() instead.

1
function Hello({ id }) {
2
  return <div ref={`hello-${id}`}>Hello</div>;
3
}

code-block.jsx:2:19 lint/suspicious/noReactStringRefs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ String refs are deprecated.
  
    1 │ function Hello({ id }) {
  > 2 │   return <div ref={`hello-${id}`}>Hello</div>;
      │                   ^^^^^^^^^^^^^^^
    3 │ }
    4 │ 
  
  ℹ String refs are a legacy React feature that can make ref usage harder to follow.
  
  ℹ Use a callback ref or an object ref created with createRef() or useRef() instead.

1
class Hello extends React.Component {
2
  componentDidMount() {
3
    this.refs.hello.focus();
4
  }
5
}

code-block.jsx:3:5 lint/suspicious/noReactStringRefs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Using this.refs is deprecated.
  
    1 │ class Hello extends React.Component {
    2 │   componentDidMount() {
  > 3 │     this.refs.hello.focus();
      │     ^^^^^^^^^
    4 │   }
    5 │ }
  
  ℹ Accessing refs through this.refs relies on React's legacy string ref behavior.
  
  ℹ Store the ref on an instance field with a callback ref, or switch to createRef() or useRef().

Valid

1
function Hello() {
2
  const helloRef = useRef(null);
3
  return <div ref={helloRef}>Hello</div>;
4
}