React Hooks: A Functional Component’s Super Power
An Introduction to React Hooks
Today we are going to talk about React Hooks. About two year ago, React v16.8 introduced us to the game changing concept of React Hooks. Basically, React Hooks allows you to use state and other React features without writing a single class component. That’s a big deal!
When I first learned about React, I was immediately taught about the differences between Functional Components and Class Components. If our component needed to deal with state, I was told to make a class components because Functional Components did not have access to state or lifecycle methods. React Hooks changes that.
Why use Hooks?
Without Hooks, React faces three major problems:
1. Wrapper Hell
Wrapper hell refers to the the chaotic hierarchy of components that can happen in a complex React project. In React we learn about patterns such as “Render Props” and “Higher-Order Components”. Render props refers to the share of data between two components by using a prop that has a function as a value. Higher-Order Components are custom components that wrap another component in itself.
Because of complex patterns like these the organization and flow of stateful logic can get confusing and thus we get “wrapper hell”:
2. Huge Components
When we deal with state, we can end up with a huge class component with so much logic and lifecycle methods. We can have fetches happen in componentDidMount and componentDidUpdate . But in that same componentDidMount we can see unrelated logic that deals with event listeners. Unfortunately React does no let you sperate these state managements. Having stateful logic and unrelated code all in one place can be hard to test for bugs and errors.
3. Classes Are Just Plain Confusing
I’ll admit, learning Classes in React can be hard. At first, this can be confusing to understand. There is also the concept of bind. What is the difference between Functional and Class Components. It can be a lot.
React Hook address all of these problems! React Hooks embraces Functional Components and gives them access to important React features without the worry of writing complex Class components.
Hooks allow you to:
- reuse stateful logic without ending in wrapper hell
- split a component into smaller functions
Rules of Hooks
Before we start looking into the 2 basic hooks, lets talk about the rules of React Hooks.
- Hooks can only be called at the Top Level. React Hooks cannot be nested
inside other functions, conditionals, or loops. - Hooks can only be called from React Function Components. Do not call Hooks from regular JS functions.
This ensures that stateful logic can be easily followed which is the purpose of Hooks.
As I go over useState and useEffect, I will be building a very basic counter app and show you exactly how these two React Hooks come into play!
So it will look something like this:
useState Hook
The useState() Hook allows us to declare state inside a function component. We can pass anything in useState(), state does not have to be an object.
So for our example, I will declare a state variable that will represent the number in the counter. I will set it equal to 5.
First remember to import {useState} at the top! Next we see this line of code:const [count, setCount] = useState(5)
useState() returns the current state and a function that updates the state. In our case that is the count and the function setCount. It is very similar to a Class Component where we would use this.state.count and this.setState. So when I refresh the page, the counter will start at 5.
Now let’s add functionality to those buttons!
As you can see the setCount function updates our state variable in a similar way that this.setState would.
useEffect Hook
As React developers, we are use to working with lifecycle method components like componentDidMount, componentDidUpdate, and componentWillUnmount. These methods allow us to create side effects whenever something happens or changes after render.
For our example we want to change the color of the counter if the number is odd or even. If it is even, it will be blue. If it odd, it will be red. This is how we do it:
First, remember to pass useEffect at the top! As you can see I added a new state variable that will keep track of the color of the counter. To do so, I just added a new line of useState(). We pass a function to our useEffect() and we pass the state as a second argument so that it changes to any update to that state. It’s important to note that useEffect() run after every render and every update.
Conclusion
That’s it! I hope this article has helped you understand a little bit more on the uses of React Hooks. It is definitely a powerful and needed addition to React (don’t worry though, classes are not going anywhere). Happy coding!
