What’s The Deal With React Hooks?

I recently completed my final project for Flatiron School’s Software Engineering program. This project was all about displaying skills we had learned with React and Redux, to build a fully functioning web app. There’s been a lot of buzz for the last few years around the dev world concerning React and other JS frontend frameworks, and it doesn’t seem to be slowing down. I know personally that I was very excited to get to learn all about React, and see what all the fuss was about.

The most seemingly recent major shift with React is the implementation of React Hooks. So what are hooks and how can we use them?

What Are Hooks?

The official React docs define hooks like this, “They let you use state and other React features without writing a class.” This is a very simple definition, but it really does say it all and speaks to the simplicity of implementing hooks, which is one of the best parts about them. We no longer need to write class components, and/or deal with everything that came along with class components. There no longer have to be different types of components that are siloed to do different things. State and data management becomes much smoother and simpler.

How To Implement Hooks?

Implementing hooks is very simple. First you can just define a basic functional component.

The most basic hook is useState, which allows us to define an initial state, and set updates to that state. First we just need to import useState from React.

Next we just need to define what our state actually is, the variable that will refer to it, and the function that we’ll use to update the state.

So in this one line of code we have a reference to our state: greeting, we have a reference to how we will update the greeting: setGreeting, and we have our initial state which is whatever we want to call within useState.

So if we have a simple form we can use the new state we just created in order to have a controlled form and update the state as the form gets filled out.

We set the value of our input to the value of our initial state, we add an onChange event handler, and then whenever the form value changes the state will get updated with our setGreeting function. And that’s it! Now we have local state implemented for this component and we have a controlled form without any class component or props.

How I Used Hooks In My Project

When I started my project I knew that I wanted to have as clean and modern React code as possible. I was determined to not use any class components and implement anything I would have needed a class component for, with hooks. Here’s an example of part of one of my components, a create form:

I’m using multiple hooks in this component. I’m using useState to handle the local state of the form. Then I’m also using useSelector, and useDispatch which are hooks are are designed to allow access to, and interaction with the Redux store. No more need for mapStateToProps or mapDispatchToProps. I’m able to access the Redux store to get all the users, and then handle that data as necessary. Once useDispatch() is set to dispatch you can simple call any action that you need like so:

I think it just makes your code simpler, cleaner, and overall more intuitive.

Final Thoughts

Building this project was really my first exposure to using React Hooks. I had heard about it before, but hadn’t actually worked with them myself. I think they’re amazing. I enjoyed using hooks much more than writing class components, worrying about where I can use local state and where I can’t. Thinking about all the props I need to pass down, what callbacks I need to pass from this component to that component. It just all feels much more straightforward to me to use hooks. I also felt it made using Redux easier as well, and I know for newer developers Redux can be something that can be really challenging. Every little bit helps.