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