logoESLint React
Rules

ensure-forward-ref-using-ref

Full Name in eslint-plugin-react-x

react-x/ensure-forward-ref-using-ref

Full Name in @eslint-react/eslint-plugin

@eslint-react/ensure-forward-ref-using-ref

Features

🔍

Presets

  • core
  • recommended
  • recommended-typescript
  • recommended-type-checked

What it does

Requires that components wrapped with forwardRef must have a ref parameter.

This rule checks all React components using forwardRef and verifies that there is a second parameter.

Omitting the ref argument is usually a bug, and components not using ref don't need to be wrapped by forwardRef.

Examples

Failing

import React from "react";
 
const MyComponent = React.forwardRef((props) => {
  //                                  ^^^^^
  //                                  - 'forwardRef' is used with this component but no 'ref' parameter is set.
  return <button />;
});

Passing

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

Implementation

Further Reading

Previous

avoid-shorthand-fragment

Next

no-access-state-in-setstate

On this page