We will be telling the code, step by step, how to do something. Well, that’s not declarative enough! We will be using the approach of - first do this, then do that.
Maybe some of you may have a question that if we are so trying to replicate tState then why not have the setState second argument callback function too, to perform some action after the state has been updated. So, we can always discuss over it in threads.
Some of the readers may feel otherwise about this approach. PS- The example in the gist can be refined much further, with more edge cases handled in enhancedReducer and the form fields code can be shortened by mapping over the form spec object to create it dynamically and reduce code duplication and some other things too. and then, it automatically returns the new object with updated data. Produce function from immer takes the object to work on as it’s first argument which in our case is the current state, and it’s second argument is a function which receives a draft copy of the object to mutate, whatever you modify inside of this function on the draft state, is done on the copy, not the actual input object state in-place. So, our other option would be the Hook, useReducer.
It isn’t practical to write different useState and then use separate update function for each field. const = useState('') const = useState('') const = useState(''). I was managing 100+ form fields ) then this approach isn’t friendly. new state based on previous updateModal(prev => !prev)īut, if you have too many individual form fields, like 100+, ( YESS!!. Now, if you are using useState for each individual form field, then you get the ability to compute new state based on the current state. Maybe you also have to update form state based on the current state, like a toggle button. The form state may even have nested information for example a user’s address information which has it’s own sub-fields like address.addressLine1, address.addressLine2 etc. Now, let’s consider a scenario where you have to manage a complex form state with multiple form inputs, which can be several different types like text, number, date input. Sometimes you may be using hooks to manage the form state, using useState or useReducer. Hooks allow us to create smaller, composable, reusable more manageable React components. and from the looks of it, everybody is going gaga over them. So, it’s been quite some time since React hooks were released. Is every body hooked yet ? Image Credits - Free Code Camp
0 kommentar(er)
