The argument function of React.forwardRef() should use its second ref parameter

• REACT_USELESS_FORWARD_REF
• Code Quality
• Low
• react

This rule applies when the argument function of React.forwardRef() does not use its second ref parameter.

The purpose of applying React.forwardRef() is to forward the ref value to an inner element.

Therefore, if the ref parameter is not used in the function body, React.forwardRef() call itself becomes pointless. It is recommended to check the function body and remove the React.forwardRef() call if it is indeed useless.

Note: This rule is based on React 18 API specifications.

Noncompliant Code Example

import { forwardRef } from 'react';

export const MyButton = forwardRef(props => // REACT_USELESS_FORWARD_REF alarm
  <button ref={props.ref}>
    {props.children}
  </button>
);

Compliant Code Example

import { forwardRef } from 'react';

export const MyButton = forwardRef((props, ref) =>
  <button ref={ref}>
    {props.children}
  </button>
);

Version

This rule was introduced in DeepScan 1.26.0.

See

• forwardRef()

• React Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?