jsx-eslint / eslint-plugin-react

React-specific linting rules for ESLint
MIT License
8.94k stars 2.77k forks source link

[Bug]: `hook-use-state` suggested fix should update all reference #3810

Open axetroy opened 3 weeks ago

axetroy commented 3 weeks ago

Is there an existing issue for this?

Description Overview

The current fix suggested is to simply replace the variable, This isn't smart enough

It should update all references

https://github.com/user-attachments/assets/92187480-3b65-4667-a94b-66c8670de283

Expected Behavior

This is a custom react-hook-use-state rule I wrote. Before this, I didn’t know the existence of react/hook-use-state

it's smart enough

https://github.com/user-attachments/assets/196c5324-b1f8-41d7-8f5a-efd2c8342508

I have implemented almost all the functions of react/hook-use-state, but the logic is simpler

I checked the source code of hook-use-state, it is very complicated, and I can't modify it

I hope react/hook-use-state can also achieve this function by someone

eslint-plugin-react version

v7.35.0

eslint version

v9.9.1

node version

v20

ljharb commented 2 weeks ago

If that can be done safely - including handling cases like { foo }, { foo: function () {} }, etc - that'd be a great enhancement.

axetroy commented 2 weeks ago

If that can be done safely - including handling cases like { foo }, { foo: function () {} }, etc - that'd be a great enhancement.

@ljharb Yes, it's safely

## invalid(5): const [user, updateUser] = React.useState()\\nconst obj = { user, updateUser }

  > Input

        1 | const [user, updateUser] = React.useState()
        2 |
        3 | const obj = { user, updateUser }

  > Output

        1 | const [user, setUser] = React.useState()
        2 |
        3 | const obj = { user, updateUser: setUser }

  > Error 1/1: useState setter should be named "setUser"

      > 1 | const [user, updateUser] = React.useState()
          |              ^^^^^^^^^^
        2 |
        3 | const obj = { user, updateUser }

## invalid(6): const [user, updateUser] = React.useState()\\nexport { user, updateUser }

  > Input

        1 | const [user, updateUser] = React.useState()
        2 |
        3 | export { user, updateUser }

  > Output

        1 | const [user, setUser] = React.useState()
        2 |
        3 | export { user, setUser as updateUser }

  > Error 1/1: useState setter should be named "setUser"

      > 1 | const [user, updateUser] = React.useState()
          |              ^^^^^^^^^^
        2 |
        3 | export { user, updateUser }