Bug: The ESLint react-hooks/refs rule marks the entire object with the ref property as a ref object

Why this is a good first issue

The issue reports a false positive in an ESLint rule's ref detection logic.

AI Summary

The issue describes a false positive where the ESLint react-hooks/refs rule incorrectly marks an entire props object as a ref when only a property should be flagged. The fix would involve adjusting the rule's detection logic, but requires understanding how the ESLint plugin processes refs.

Issue Description

eslint-plugin-react-hooks version: 7.0.1

Steps To Reproduce

const Test = props => {
    return (
        <div>
            <button ref={props.buttonRef}>
                {props.text}
            </button>
        </div>
    );
};

The current behavior

The rule warns in both props props.buttonRef and props.text

The expected behavior

Errors in the rules are not expected.

This can be easily fixed as follows:

const Test = props => {
    const { buttonRef } = props;

    return (
        <div>
            <button ref={buttonRef}>
                {props.text}
            </button>
        </div>
    );
};

Simple logic tells me that the destructuring of variables should be equivalent to the direct use of prop in terms of rule errors. The rule incorrectly marks props how to ref instead of `props.buttonRef'?

GitHub Labels

Status: Unconfirmed