Hooks in practice : system of favorites in localstorage

Create your first hook and reuse it in your React apps

Amichaud Romain
2 min readJan 15, 2021


Photo by Milada Vigerova on Unsplash


  • Find out how to add hooks to our React components
  • Write easy re-usable logic
  • Use the localstorage API

You can test the application and see the sources of this tutorial.


The hooks were introduced by the developers of React to allow a better organization of the code by exporting certain elements of component logic. Several hooks are developed and used within a project, and the simplicity with which they can be re-used make it a tool staple of the React ecosystem.

A bit of theory

We are going to set up a hook step by step to manage a system of favorites. Our application manages users, and we want to be able to bookmark certain users, remove them from our favorites and easily find.

For this we will use the localstorage. Each user has a unique ID, our favorites will be stored in the form of an array containing IDs, saved as a character string in the localstorage.

Start the project

We will use the create-react-app tool to not worry about the project setup and focus on the code.

Node.js and npm should be installed, then the following command executed to create the project :

npx create-react-app bookmark-hook-tutorial

Creation of our components

A first component will display a user:

The users will then be listed by another component:

Finally the list of users is rendered in our application, by retrieving a local list of users :

Setting up the hook

In our example we want to manage favorites. We want to be able to add, delete a favorite, consult the list of favorites, and find out if a user is favorite or not.

Using our hook in our component

All we have to do is use the logic of our hooks within our components. For the User component, we add the functionality of adding / deleting favorites :

For the list of users, we add a filter functionality, and a little styling :

Our favorites system is operational, and it persists even after refreshing or closing the application thanks to localstorage.

Our components are little impacted by the localstorage backup logic, and our hook can easily be re-used in another application.

You can find all the sources here and a demo of the application

Originally published at https://romainamichaud.com.