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

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

Open axetroy opened this issue 1 year ago • 2 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

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

axetroy avatar Aug 31 '24 08:08 axetroy

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

ljharb avatar Sep 08 '24 05:09 ljharb

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 }

axetroy avatar Sep 08 '24 05:09 axetroy