Hooks in practice : system of favorites in localstorage
Create your first hook and reuse it in your React apps
Goals
- 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.
Context
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.
