eslint-plugin-react icon indicating copy to clipboard operation
eslint-plugin-react copied to clipboard

[Bug]: `hook-use-state` is not doing what the documentation says it does

Open ericmorand-sonarsource opened this issue 10 months ago • 1 comments

Is there an existing issue for this?

  • [x] I have searched the existing issues and my issue is unique
  • [x] My issue appears in the command-line and not only in the text editor

Description Overview

hook-use-state documentation says that the rule checks whether the value and setter variables destructured from a React.useState() call are named symmetrically.

It does not say that the rule checks whether the result of a react.useState class is destructured.

Either the description is wrong, or the implementation is wrong.

Expected Behavior

If the rule is actually checking whether the value and setter variables destructured from a React.useState() call are named symmetrically, then the following code sample should be correct.

import React from 'react';
export default function useColor() {
  // useState call is not destructured into value + setter pair
  const useStateResult = React.useState();
  return useStateResult;
}

If it is not, then, the description must be updated to:

This rule checks whether the return value of a React.useState() call is destructured, and the value and setter variables are named symmetrically.

eslint-plugin-react version

every

eslint version

v9

node version

v20

ericmorand-sonarsource avatar Jan 06 '25 16:01 ericmorand-sonarsource

I'm not sure how it could validate the names without it also being destructured, so i think the docs are correct as-is, but your suggested change certainly is more explicit. Feel free to submit a PR.

ljharb avatar Jan 06 '25 19:01 ljharb