How to use React Basic Hooks useState, useEffect and useContext

Koji Mochizuki
Sep 10 · 4 min read
Photo by Chris Scott on Unsplash

Hooks are a new feature released in React 16.8. Previously, only class components could have lifecycle methods such as state and componentDidMount. But with React Hooks, functional components can also have these features.

In this tutorial, we will build a simple Book App using three Basic Hooks. It looks like this:

Book App

Let’s get started!


Table of Contents

  1. Creating React App
  2. Using Materialize
  3. Using Context
  4. Creating Components
  5. Updating the App component
  6. Styling the App
  7. Testing the App

Creating React App

To create a new app, use the following method:

yarn create react-app react-hooks-app

If you have never used Yarn, you will need to install it on your system. Or, you can use npm instead.

Move to the app’s directory and start a local server:

cd react-hooks-app
yarn start

A new browser tab opens and displays the initial page. If not, open http://localhost:3000 to view it in your browser.

Edit the App.js file and see how the display changes:

Save the file and look at your browser. Did “App” appear?

Since the App.test.js and logo.svg files are not used, you can remove them from your project.

Using Materialize

In this tutorial, we will use Materialize as a front-end framework. You can easily get started with CDN. In addition, include a line for using Material Design Icons. Open the index.html file in the public directory:

Simply add the <link> tags inside the <head> tag and the <script> tag inside the <body> tag. Also, change the title.

Using Context

To be honest, the app we are going to create is so simple that we do not need to use Context, but I would like to use it as a test.

Create a new folder named contexts in the src directory, then add a new file named BookContext.js inside the folder:

useState is one of the Basic Hooks. It returns a stateful value [state, ...], and a function [..., setState] to update it.

Context objects come with a Provider component. It takes a value property and passes it to descendant components.

uniqid is a unique ID generator.

yarn add uniqid

It is very easy to use.

Creating Components

Create a new folder named components in the src directory, then add some component files inside the folder.

BookList

First, create a file named BookList.js:

useContext, one of the Hooks, receives a context object and returns the current value of the context.

BookForm

Create a file named BookForm.js:

Form components use a state to store temporary values. After submitting a form data, use the setBook function to empty the values.

If a state object has multiple values, we can write handleChange using the Spread Operator.

Dashboard

Create a new component to bundle these two components:

About

Create a simple component for the about page:

Contact

Also, create a component for the contact page:

Navbar

Finally, create a navbar component:

The last one of the Basic Hooks, useEffect, is used here. It is clearly described in the React Docs:

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

In our useEffect hook, initialization code for a slide-out menu provided by Materialize is set.

Install a module to use Link navigation:

yarn add react-router-dom

Updating the App component

Now, nest all the components we have created in the App component:

We can use the contexts by setting our ContextProvider as above.

Styling the App

As a final touch, style our app a bit. Open the App.css file and overwrite it as follows:

It is convenient to define CSS variables for colors that are used repeatedly. It will be effective when your app grows.

Testing the App

The Book App should look like this:

Dashboard

Add some items to see if the form is working. Also, test the delete action.

Slide-out Nav

The slide-out function is also working well. Sorry that the picture is not so good…

About
Contact

Routing is also perfect!


This is the end of this tutorial. This time we tried to build a simple app to test the Basic Hooks. In the next step, I will write about database connection and deployment.

The source code used in this tutorial is available on GitHub.

Leave a comment below if you have any questions or concerns. You can also contact me via Twitter.

Thank you for reading :)


Koji Mochizuki

Written by

Web App Developer, Blockchain Engineer. Python / Django / Flask / JavaScript / Node.js / React / Solidity

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade