React Hooks 1: useState, useEffect, useContext, useRef & useReducer

Photo by Lautaro Andreani on Unsplash

I have been working in React for about nine months, and after finishing Brian’s Holt Complete Intro to React and Intermediate React and digging into the React Docs, I thought I would put together a summary of React Hooks and also my personal experience using some of them.

In this first part, I’ll cover useState, useEffect, useContext, useRef and useReducer, being the two first ones the ones use mostly at the moment.

Reusing state between components in React is hard. With Hooks, it’s possible to extract stateful logic from a component, this makes it possible to be tested independently and reused.

In conclusion, Hooks allow you to reuse stateful logic without changing your component hierarchy.

I’m going to list them all but first, I’ll go into more detail about the ones I use every day at work, useState and useEffect.

1. useState

useState allows you to make components stateful. In older React to do so, it required using a class component. Hooks give the ability to write it using just functions.

This allows us to have more flexible components. In the example component below, every time the user clicks on the h1, it’ll change colours. It’s doing this by keeping that bit of state in a…