DEV Community

Discussion on: Refactor a form with React Hooks and useState

Collapse
 
giovannipds profile image
Giovanni Pires da Silva • Edited

Hi Damien! Just saw your approach and applied in a new form I was making at work. Seems like the performance went down. As I'm supposing, having one unique state for all the inputs may dispatch multiple component (input) renders, since all the states are being changed every time when just one's changing. Isn't the performance better having separated hooks for each inputs? Seems like's not just about it being more readable or not.

Collapse
 
giovannipds profile image
Giovanni Pires da Silva

It'd probably be cooler to just merge handleInputChange as you did but keep hooks separated.

Collapse
 
giovannipds profile image
Giovanni Pires da Silva

Pardon! I can be wrong, just tested a little stuff here and saw that my whole page was being loaded. Seems like not be a problem of this technique itself but an issue of my page/project/partial. Thank you for sharing your knowledge!

Collapse
 
damcosset profile image
Damien Cosset

Hello!
I should have explored the performance aspect of the refactoring! I didn't consider that when I wrote that article unfortunately. I would recommend having your state variables separated when using hooks. You can find more informations on the React docs right here.