Getting started with React Hooks — A simple guide

Photo by Suad Kamardeen

React Hooks officially got released a few days ago, and I would love to share some code snippets on how it’s been used. We’ll basically be diving into some of the hooks, and maybe a second part to discuss the others.

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. — React Docs

A screenshot of what we’ll be working on with React Hooks

Here are some bunch of div’s with a touch of flexbox and inputs. The hooks we’ll be making use of today are focused more on the inputs.

UseState Hook

The useState hook is the functional component way of setting and retrieving state. Let’s look at how it’s done.

Here’s the initial State of our App. It does nothing special than rendering our form inputs and button

The usual flow in updating the username and password field would be:

• Convert the functional component to a class component
• Initialize username and password state to an empty string. Let’s say we are not using the old way of setting it in the constructor
• Add value and onChange prop to the inputs
• In the onChange prop handler, call this.setState to change the input

The usual way to setState, using a class-based component

Now, let’s see how this plays out with useState.

useState is simply a function that takes in the initial state and returns an array containing the state, and the state handler.

Not React’s useState, just an illustration of what it does behind the hood

As we can see above, it exposes both the current value and the handler via ES6 Array Destructuring. It’s quite simple right? Yay!

I guess it’s time to revert back to using our explicit functional component and using the React’s useState hook.

Functional Component with UseState

It just works like that. Awesome! Now, once the user types, it gets updated with our hooks handler, and we can see the output on the right pane.

useReducer Hook

useReducer takes in a reducer, an optional initial state, and returns an array containing the state(s), and an updater. It’s actually preferable to make use of useReducer when you need to update multiple states. As shown in the useState example, we had separate handlers for username and password. Just imagine the number of useStates we’ll have to make use of in a registration component containing a lot of boring fields.

Let’s see how this plays out.

Functional Component with UseReducer

What I did with my reducer was to return a new object that joins both the previous state and the new state anytime useReducer is called. There are several ways the useReducer can be used, but this is a lot easier.

useEffect Hook

Curious as to what useEffect does right? Maybe, Maybe not. But, with useEffect, you can “react” to changes that occur in the component life cycle, as what you would normally do with componentDidMount, componentDidUpdate, and componentWillUnmount.

Functional Component with UseEffect

The regular usage of useEffect like that will get triggered by all the lifecycle methods but that might be a little bit problem, just in case we only need one or two of the lifecycle methods to get triggered as shown below.

The impact of using useEffect

ComponentDidMount logs out the first “render counts” to the console. Calling updateMounted in useEffect callback triggers ComponentDidUpdate because the mounted state changed, which also added to the “render counts”. The last count was then updated by adding the text “a” to username field.

Let’s say we want the mounted state to get updated only once regardless of the state changes in our functional component, how do we achieve this?

It’s quite simple, useEffect takes in an optional second argument which is usually an array of props, does some shallow comparison with the current and previous values, and returns the callback if there’s a change. This still triggers both componentDidMount, and componentDidUpdate lifecycle methods but the behaviour changes a bit here, as the compared props are in charge of determining whether the callback should be called on component update.

UseEffect with an array of Props(States)

With this, we no longer get multiple “render counts” on username change, because we didn’t add it to useEffect.

What if we don’t want our callback to be called on componentDidUpdate, but only on componentDidMount?

UseEffect with an empty Array

That’s it. Supply an empty array and you have “render counts” logging just once because we are not keeping track of any change in states here.

Note that: useEffect can be called multiple times to handle different states as shown below

Mutiple useEffects

Lastly, let talk about something the React community called “cleanup”. It’s used in useEffect to clean up whatever isn’t necessary at the unmount lifeCycle.

Let’s see how it works.

UseEffect with Cleanup

A log is placed once the clean up is fired. Yeah! we could do some cleaning up in the return function statement, which will get called only when the component is about to be unmounted.

Clean up called on componentWillUnmont

You might also be interested in checking out a similar hook to this, which is the useLayoutEffect which fires synchronously after DOM mutations.

These are really simple use cases. You could make your functional components reactive with the hooks, give it a trial today.

The code for this tutorial can be found on GitHub. Just check through each branch for each hook used; useState, useReducer, useEffect.

Thanks for your time, I wouldn’t mind some applause if you find this interesting.

Updated: I wrote a second part of using React Hooks which cuts across useReducer(dispatching actions), useContext, and useRef.