React Hooks, useState, and useEffect
When I first began learning how to build applications using the Reactjs library, I was using a mixture of functional components and class components. Since there were aspects of my application that would have to manage state, I had to use a class component to be able to utilize that aspect of React through a constructor function. Soon after finishing my application, I learned about React Hooks, a new-ish addition to React that allows you to utilize state in a functional component instead of having to rely on class components. The React documentation describes hooks with the following:
“With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.”
While the ability and flexibility of Hooks to be used across your application is invaluable in managing logic, this isn’t the only thing they can be useful for. There are a number of hooks shipped with the base Reactjs library, but you can even create your own custom hooks to use across your application! In this blog post, I’ll break down the difference between a component in an application I built when I was still using class components and the new functional components that utilize hooks.
These are screenshots of my EmployeeContainer class component and the same component when I transitioned it into a functional component. Initially, I wanted to use a class component to utilize state to decide which form component was displaying on the screen, a form to create a new employee, or a form to edit an existing employee. If you look right on the first line of the component, you see the first change from a class component managing state to a functional component managing state through the useState prop.
The first aspect, employeeId in my case, is the name of that specific part of state. The second aspect is the setEmployeeId function, which can be used in place of the ‘this.setState’ call to edit that aspect of state. So, in the functional component, the setEmployeeId function is used in the handleEdit function to set state to the id of the employee you want to edit, so the form can populate with that employee’s information and edit the correct employee in the database. The same function is then used in resetEmployeeId to reset the state to false when the submit button is pressed on the form.
The next hook that I used in this component is the useEffect hook, which is used to perform side-effects in functional components. The documentation for React gives a learning tip to think of useEffect as the componentDidMount, componentDidUpdate, and the componentWillUnmount lifecycle methods all in one place. In my previous class component, I used componentDidMount to fetch my employees and titles from my React-Redux store, so I just replaced my componentDidMount with a useEffect hook, which was the only change that needed to happen to make my fetch requests function!
This is just scratching the surface of the power of React Hooks. In a future blog, I’ll likely go over some other built in React hooks, and that doesn’t even begin to include the hooks that are used in add-ons like React-Redux, which has it’s own unique custom hooks that it’s shipped with! React hooks are an exciting new addition to the React world, and I’m excited to dive even deeper into my understanding of them!