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, when 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.

Noncompliant Code Example

import React from 'react';

const FancyButton1 = React.forwardRef((props, ref) => ( // REACT_USELESS_FORWARD_REF alarm
    <button ref={props.ref} className="FancyButton1">
        {props.children}
    </button>
));

const FancyButton2 = React.forwardRef((props) => ( // REACT_USELESS_FORWARD_REF alarm
    <button ref={props.ref} className="FancyButton2">
        {props.children}
    </button>
));

Compliant Code Example

import React from 'react';

const FancyButton1 = React.forwardRef((props, ref) => (
    <button ref={ref} className="FancyButton1">
        {props.children}
    </button>
));

const FancyButton2 = React.forwardRef((props, ref) => (
    <button ref={ref} className="FancyButton2">
        {props.children}
    </button>
));

Version

This rule was introduced in DeepScan 1.26.0.

See

• Forwarding Refs

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