Removing the Training Wheels: Making Class Components Functional in React
An introduction into React Hooks — the useState & useEffect hooks
When first learning React, I almost always kept my components as Classes. It was the easiest way to learn state, how to set state, and pass down props to different components throughout my applications. Now that I have spent several weeks using React and building multiple projects, I am making more and more attempts to keep all my components functional. To do this, and if you want to use state (which is the power of React), you need to become familiar with hooks.
useState Hook:
Below is the most simple representation of a counter component, which allows the user to increase or decrease a count with two buttons:
The above was as simple as running npx create-react-app, and turning the App from a functional component to a Class component. I then set state at 0, and added a few HTML elements to show the user state and how to manipulate it.
Below is the exact same functionality, but as a functional component and using the useState hook:
The above has identical functionality to the user, but has a functional component behind the scenes as opposed to a class component. Rather than extending a React component to the app, I brought in useState as a hook on line 1. Then, as opposed to setting state as a key/value pair, state is declared as variables on line 6. I also was able to remove this.state from the counter and just call on the variable count. Finally, I was able to manipulate state by incrementing or decrementing the count with the two buttons as HTML elements using onClick functions.
Hooks and keeping components functional can reduce the amount of code you have to write, and most agree it looks a little cleaner. One of the cons of using the useState hook is shown below:
As you can see, the top image shows state along with the key of count and its current value. On the bottom, the dev tools just show a hooks reference with State being a key shown with its current value. There is no reference in the dev tools to the count variable we declared. When using multiple variables to declare state, it can get a little cumbersome to determine which state applies to each component’s functionality.
useEffect Hook:
Beyond the useState hook, React’s useEffect hook is the second hook most React devs start needing in their tool chest. It is similar to the componentDidUpdate(). Below is the useEffect hook in action:
This hook was required due to updating the user’s state. When my application mounts, the user’s state is initialized as an empty object. After the user logs in with a successful username and password, the user’s object is updated to reflect their profile information (such as key/value pairs with their name, email, username, password, etc.). After the user is logged in, they are pushed to the app’s HomePage component. Without the useEffect hook, the props would only update on a refresh. The header HTML element would stay blank until a refresh (e.g.: Welcome !). By implementing the useEffect hook on lines 5-7, I’m notifying React to update after the render. The HomePage component will render, and then update the user’s empty object by fetching from the backend using the useEffect hook.
Wrap-Up
I’m trying to use hooks more and more in all my React applications moving forward. It seems like most companies implement hooks in their platforms, and they don’t seem to be going away from the marketplace anytime soon.
I hope you can do the same after reading this post! Happy coding!
