no-implicit-ref

This rule is currently in rc and only available in v3.0.0 rc releases.

This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.

Full Name in eslint-plugin-react-x

react-x/no-implicit-ref

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-implicit-ref

Features

💭 🧪

Presets

Rule Details

This makes it hard to see whether the ref was passed correctly to the element or where it came from.

The following cases are allowed and will not be reported:

The ref property originates from React's own type definitions (ex: React.ClassAttributes.ref), such as when spreading React.ComponentProps<"div">, React.HTMLAttributes<T>, or similar React-provided types.
The ref property's type is a React-defined ref type alias, such as React.Ref, React.RefObject, React.RefCallback, or React.LegacyRef, even if the property is declared in a user-defined type.

Common Violations

Invalid

import React from "react";

declare let someValues: { id: string; className: string; ref: null };

function MyComponent() {
  return <div {...someValues} />;
  //          ^^^ This spread attribute implicitly passes the 'ref' prop to a component, this could lead to unexpected behavior. If you intend to pass the 'ref' prop, use 'ref={value}'.
}

Valid

import React from "react";

declare let someValues: { id: string; className: string; ref: null };

function MyComponent() {
  const { ref, ...rest } = someValues;
  //      ^^^ Dropping the 'ref' prop from the spread attributes to prevent implicitly passing it to the component.
  return <div ref={ref} {...rest} />;
}

import React from "react";

declare let someValues: { id: string; className: string; ref: React.Ref<HTMLDivElement> };

function MyComponent() {
  return <div {...someValues} data-slot="pagination-item" />;
  //          ^^^ The 'ref' property is typed as React.Ref, which is a React-defined type alias. Allowed.
}

import React from "react";

function PaginationItem({ ...props }: React.ComponentProps<"li">) {
  return <li data-slot="pagination-item" {...props} />;
  //                                     ^^^ The 'ref' property originates from React.ClassAttributes.ref. Allowed.
}

Rule Details

Common Violations

Invalid

Valid

Resources

See Also

On this page