Hey everyone! I'm here writing my first post on medium to talk about controlled forms with React Hooks.
I see many programmers who have doubts when they go from class based components to hooks, and in most cases it is more about knowing how to choose the right hook for the right task.
But before we talk more about controlled forms with hooks, let's understand more about how controlled forms work with class based components.
In the example above, we have a class based component User that only has one input and one state, but if we need to add a form with many fields its just add a name equals the state name, get the state on value, set the onChange function and its done, all inputs are being controlled by the state.
But when we think about hooks, there is a different way to manage state, and a very easy one by the way, its called useState hook, let's see how we write that same component using the useState hook.
That solution seems to be very better and pretty that the class based component solution, and is, but the problem starts when you need a bigger form, as you can see bellow.
And that's does not looks so pretty anymore, and here is where i see many programmers having a lot of doubts of better way of solve this problem, and the most part of that is because they not know all hooks and all possibilities that they can have with it.
So let's talk a little bit about the useReducer hook using the definition on official documentation.
An alternative to
useState. Accepts a reducer of type
(state, action) => newState, and returns the current state paired with a
dispatchmethod. (If you’re familiar with Redux, you already know how this works.)
useReduceris usually preferable to
useStatewhen you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.
useReduceralso lets you optimize performance for components that trigger deep updates because you can pass
dispatchdown instead of callbacks.
The documentation tell us to use this useReducer hook when we handle complex state logic, and here where many people don't consider using that for a simple controlled form, but reducer is nothing more that a function that receives a state and returns a new one, and our input changes are exactly that, a function that receives actual state and returns a new one when user type some key on his keyboard.
With that in mind, let's see how we can use the useReducer hook to solves our "controlled form with multiple inputs" problem.
First of all we need to create the initial state and after that we will create a reducer that will return the state with the new information.
After that we send the reducer and the initialState to useReducer hook, and that hook will return a state method to get the state and a dispatch method to make changes on that state.
And thats it, we have the same behavior as before with class based components, but using hooks with that is much more flexible and easier to extract logic, work with larger teams and more.
That's all everyone, I hope this has helped to clarify some doubts about controlled forms with hooks and brought new insight into how we can use hooks more creatively to solve many problems that we have in our daily work.