logoESLint React
Rules

no-useless-forward-ref

Full Name in eslint-plugin-react-x

react-x/no-useless-forward-ref

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-useless-forward-ref

Presets

  • x
  • recommended
  • recommended-typescript
  • recommended-type-checked

Description

Disallow useless forwardRef calls on components that don't use refs.

This rule enforces that:

  1. Components using forwardRef must declare a ref parameter
  2. Components not using ref should not be wrapped with forwardRef

Examples

Failing

import React from "react";
 
const MyComponent = React.forwardRef((props) => {
  //                                  ^^^^^
  //                                   - 'forwardRef' wrapper is useless without 'ref' parameter.
  return <button />;
});

Passing

import React from "react";
 
const MyComponent = React.forwardRef<HTMLButtonElement>((props, ref) => {
  return <button ref={ref} />;
});

Implementation

Further Reading

See Also

  • no-forward-ref
    Replaces usages of forwardRef with passing ref as a prop.

no-use-context

Previous Page

no-useless-fragment

Next Page

On this page