Firts of all the goal of this post was to show how to mimic setState method with useReducer hook (mostly for fun as I mentioned in the post).
I also wanted to show that one doesn't have to use actions, switch statement, payloads etc. while using useReducer hook (like we do with Redux).
I totally agree that one of the advantages of hooks is the posibility to split and compose chunks of code the way it is convinent for the programmer. You rarely have to do something. More often you can if you like.
Having said that using useReducer makes sense when you want to keep in state variables that are related to each other. E.g. imagine that you have form with dozens of fields and you want to implement reset functionality. Using useState means you have to remember to manually reset every single field one by one:
The more you have to remember and do manually the bigger possibiity of bug (to say nothing about how tedious it might be). >
In your example, if you add another property, for example, the 'Middle Name', you have to add a row in either the cases (using multiple set or a setState).
The number of things to remember is the same, so the 'possibility' of a mistake is the same.
This way I don't have to remember which state variables should be changed. I can take a look at initial formData object and see all properties that need to be reset.
I totally agree with you. For instance, say you have a form with a few inputs. When you go to submit that form, if you are using useState, then you have to create an object with all of the fields in order to submit the data. Sure... no big deal, but when using useReducer, you simply submit your state because it is already an object.
Anyone saying that you are "doing it wrong" is, well.... wrong. There is no rule that says you can't use useReducer just like you are using it in this example. I actually prefer it and if it works easier for you, then "you are doing it right" (especially since there are no perf hits and nothing wrong syntactically).
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi @sunpietro , thank you for your comment!
Firts of all the goal of this post was to show how to mimic
setState
method withuseReducer
hook (mostly for fun as I mentioned in the post).I also wanted to show that one doesn't have to use actions, switch statement, payloads etc. while using
useReducer
hook (like we do with Redux).I totally agree that one of the advantages of hooks is the posibility to split and compose chunks of code the way it is convinent for the programmer. You rarely have to do something. More often you can if you like.
Having said that using
useReducer
makes sense when you want to keep in state variables that are related to each other. E.g. imagine that you have form with dozens of fields and you want to implement reset functionality. UsinguseState
means you have to remember to manually reset every single field one by one:With
useReducer
you can do the same thing like this:The more you have to remember and do manually the bigger possibiity of bug (to say nothing about how tedious it might be).
If you happen to use TypeScript the advantage of the second approach is even bigger (e.g. you'll get an error if you forget to reset some field).
Again the goal of this post was not to show how to use
useState
vsuseReducer
So hopefully my approach wasn't that bad after all? :)
In your example, if you add another property, for example, the 'Middle Name', you have to add a row in either the cases (using multiple set or a setState).
The number of things to remember is the same, so the 'possibility' of a mistake is the same.
@alfredosalzillo yes but having them groupped in one object means: they are connected to each other.
This way I don't have to remember which state variables should be changed. I can take a look at initial
formData
object and see all properties that need to be reset.I totally agree with you. For instance, say you have a form with a few inputs. When you go to submit that form, if you are using
useState
, then you have to create an object with all of the fields in order to submit the data. Sure... no big deal, but when usinguseReducer
, you simply submit yourstate
because it is already an object.Anyone saying that you are "doing it wrong" is, well.... wrong. There is no rule that says you can't use
useReducer
just like you are using it in this example. I actually prefer it and if it works easier for you, then "you are doing it right" (especially since there are no perf hits and nothing wrong syntactically).