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

core
recommended
recommended-typescript
recommended-type-checked

What it does

Disallows using deprecated string refs.

Why is this bad?

String refs are deprecated in React. Use callback refs instead.

Examples

Failing

import React from "react";
 
function Example() {
  return <div ref="ref" />;
  //              ^^^^^
  //              - [Deprecated] Use callback refs instead.
}

Passing

import React, { useRef } from "react";
 
function Example() {
  const ref = useRef<HTMLDivElement>(null);
  return <div ref={ref} />;
}

no-set-state-in-component-will-update no-unsafe-component-will-mount