jsx-eslint/eslint-plugin-react

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

Opened this issue · 2 comments

Is there an existing issue for this?

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

Description Overview

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

It should update all references

2024-08-31.16.48.48.mov

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

2024-08-31.16.49.50.mov

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

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

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 }