Hooked on React Hooks🪝

A simple guide on React hooks

Photo by Ferenc Almasi on Unsplash

Intro

I love React hooks. When I was enrolled in Flatiron School, Hooks was not part of the React curriculum yet but after I graduated I had some underclassman tell me they are learning hooks in their React JS class.
After doing a little research, I was immediately hooked… no pun intended.
So today, I will be sharing some React JS knowledge.

Basics

Hooks were introduced in React v16.8.0. My favorite thing about Hooks is that they are able to provide state to functional component rather than class component which makes your app way faster due to not loading any unnecessary logic from class components.

Today I will be writing out a counter program to show you how to use hooks in React.

State Hook🪝

The useState hook is used to replace the tradition way of setting state in class components since it provides you with a state and a setter function for that state as well. With that said useState must be called on the top level of the component which helps prevents state bugs since you can’t set a state in a loops or other functions.

To start using the useState hook you just need to import it from react and choose what kind of state you want, in this instance I am gonna useState with my counter.

import useState from "react"

Since hooks are built into react you can simply import it from react and declare a constant with a array of three things

const [ count,setCount ] = useState(0)

1. count — first item is easy, simple name the state whatever you want
2. setCount-second item is very easy as well, this going to be your state setter.
3. useState(x)-simply set your default value inside the useState params

You can write out separate functions to use your setCount(state setter) but you can also write out some shorthand functions like I did on my onClick handlers which I think its helps with the cleanliness.

Effect Hook🪝

The useEffect hook is is favorite since it replaces all of the traditional life cycle methods such as componentDidMount, componentDidUpdate and componentWillUnmount. I love the Effect hook because it helps me keep my code cleaner since I don’t have to write out functions for each of these individual lifecycle methods.

import useEffect from "react"

useEffect(() => {
   **code**
},[2nd param])

The above syntax is used to replace the componentDidMount Higher order function in React, you simple call the useEffect hook with a shorthand function to specify what you want to do and and leave a empty array as the second param to specify that you don’t want to track anything with the useEffect hook.

If you put a state in the array as the second param, useEffect will track that state just like componentDidUpdate. As you see in the above demo, you can see that the count is displayed in the console due to me clicking on the + button a bunch of time which will trigger the useEffect hook due to settings the state of count to be tracked.

If you want to set a componentWillUnmount in the effect hook, you simple set a return statement with a shorthand function of what you want to happen before the component unmount from the virtual DOM.
In my example I simply put a console log of “cleaning up” and as you see from the example it runs only if I click a button and you can see that there’s nothing to clean up after the last button clicked since the component has not unmounted yet.

Conclusion

I hope this article helped you understand react hooks a bit. I personally love react hooks due to its simplicity and will definitely use it indefinitely.

If you enjoyed this article, please follow or leave a comment.