Intro to React Hooks

May 11, 2019
Javascript react hooks

With the release of React 16.8, React Hooks are now available in a stable release!

What are React Hooks?

Hooks allow you to use state and other React features without writing a class.


What are some of the Basic Hooks Available?

useState

a hook to allow a function component to utilize state

useReducer

an alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.)

useEffect

a hook to allow you to declare a function that contains imperative, possibly effectful code. Mutations, subscriptions, timers, logging, and other side effects are not allowed inside a function component. Doing so leads to confusing bugs and inconsistencies in the UI.

The function passed to useEffect will run after the render is committed to the screen. By default, effects run after every completed render.

useContext

makes it easy to use React context without using a class component. React context gives the ability to easily share state between multiple components, similar to Redux.


Show Me Some Code!

To help showcase how/when to use these basic hooks I will show an example of a class component doing a “thing/feature” and then show how to achieve the same “thing/feature” using a new React hook.

useState

For the useState example I will use the classic counter example to keep it simple.

Class Component Solution

Function Component Solution

The function component contains far less required ceremony to utilize a simple counter state. Less things that you need to remember to do and wire.

useReducer

For the useReducer example I will repeat the counter example from before with some increased options

Class Component Solution (with the help of Redux)

Function Component Solution

The function component contains far less ceremony to setup to utilize a simple counter reducer. Less things that you need to remember to do and wire. However this isn’t a perfect 1:1 comparison as Redux is meant to be global state whereas useReducer is meant to be local state.

useEffect

For the useEffect example I will use a corporate buzzword API to load a random corporate buzzword into the component.

Class Component Solution

Function Component Solution

In the function component example we get the effect to only run once by specifying an empty array as the second argument, reference to how this works

Use Context

For the useContext example I will show how you can use a shared theme data across components.

Class Component Solution

Function Component Solution

These 2 examples are almost identical, but in my opinion I think the function component example is a bit easier to use.

And with that we have come to the conclusion of some very quick and dirty diffs of class components vs function components with new React Hooks. I hope these examples can help you internalize how and when you can use some of the available React Hooks.

Here are some great additional resources you can dive into to learn more about React Hooks in-depth.


Dan Abramov’s React Conf 2018 Hooks Talk


Hooks API Reference

Hooks General Overview

Introducing Hooks - explains why hooks were added to React

Hooks at a Glance - is a fast-paced overview of the built-in Hooks

Building Your Own Hooks - demonstrates code reuse with custom Hooks

Making Sense of React Hooks - explores the new possibilities unlocked by Hooks

useHooks.com - showcases community-maintained Hooks recipes and demos