no-forward-ref

Full Name in eslint-plugin-react-x

react-x/no-forward-ref

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-forward-ref

Features

🔄

Presets

core
recommended
recommended-typescript
recommended-type-checked

Description

Replaces usages of forwardRef with passing ref as a prop.

In React 19, forwardRef is no longer necessary. Pass ref as a prop instead.

forwardRef will deprecated in a future release. Learn more here.

Examples

Before

import React, { forwardRef } from "react";
 
const MyInput = forwardRef(
  function MyInput(props, ref) {
    return <input ref={ref} {...props} />;
  },
);

import React from "react";
 
interface MyInputProps {
  value: string;
  onChange: (value: string) => void;
}
 
const MyInput = React.forwardRef<MyInputProps, HTMLInputElement>(
  function MyInput({ value, onChange }, ref) {
    return (
      <input
        ref={ref}
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    );
  },
);

After

import React from "react";
 
function MyInput({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

import React from "react";
 
interface MyInputProps {
  value: string;
  onChange: (value: string) => void;
}
 
function MyInput({
  ref,
  value,
  onChange,
}: MyInputProps & { ref?: React.RefObject<HTMLInputElement> | null }) {
  return (
    <input
      ref={ref}
      value={value}
      onChange={(e) => onChange(e.target.value)}
    />
  );
}

Description

Examples

Before

After

Implementation

Further Reading

See Also

On this page