React controlled forms with hooks

Vinicius Tiesse
Sep 14, 2019 · 3 min read

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.

Image for post
Image for post
Example of a controlled input with class based component

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.

Image for post
Image for post
Example of a controlled input with 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.

Image for post
Image for post
Example of multiple controlled inputs with useState hook

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 dispatch method. (If you’re familiar with Redux, you already know how this works.)

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down 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.

Image for post
Image for post
Example of multiple controlled inputs with useReducer hook

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.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store