noReactStringRefs

JavaScript (and super languages)

Summary

Rule available since: v2.4.14
Diagnostic Category: lint/nursery/noReactStringRefs
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
      "nursery": {
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/nursery/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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

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

code-block.jsx:2:19 lint/nursery/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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

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

code-block.jsx:3:5 lint/nursery/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().
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

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