Skip to content

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

@4eb0da

Description

@4eb0da

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'?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions