Working with Jotai as your next state management in React

Working with Jotai as your next state management in React

Working with Jotai as your next state management in React

Introduction

Data is critical to the operation of a React application, so it is necessary to maintain track of it as well as pass it properly through components in a React application. Prop drilling allows data to be passed from a parent component to a child component and has thus been widely utilized in the development of React apps. However, as the complexity of a React application grows and there are several child components from a parent component, data flow becomes cumbersome and less scalable. This issue prompted the introduction of state management into building applications. Despite being efficient and scalable, most common state management needed additional boilerplate code on setup. As a developer who is continually looking for efficient and user-friendly options, I came across Jotai, a minimalistic state management tool that can be used in constructing scalable react applications. In this tutorial, I will walk you through the Jotai library as well as teach you how to utilize Jotai to build a simple application.

Jotai

Jotai is a state management library that follows the “atomic” state pattern introduced by the Recoil Library. In Jotai, data is stored an independent state known as an atom which is merely an object that holds values. Jotai uses atoms to replace the local state variables in React components. This object is then supplied to Jotai’s useAtom() hook, allowing your components to consume and update the value it currently stores.

Building an Application Using Jotai

In this article, we will illustrate the power of Jotai by utilizing it to build a simple task application. This application simply creates, updates, and deletes tasks. With this application, we will showcase how to create atoms as global states and update atoms.

Installation

first and foremost, create a react application using Vite. Navigate to your terminal and type the following commands:

for yarn

for npm

A screenshot showing the process of installing our application

A screenshot showing the process of installing our application

After installation, open the application using your code editor of choice, then run the commands shown on the terminal after installation.

Create Global atom for the Application

Before creating an atom, we will wrap the application with Jotai’s provider component. The provider components work like a regular context provider which aids in passing down values through the application’s component tree. This ensures that the atoms are accessible throughout the application. In order to use the provider, we will import the provider from Jotai into the entry file(main. tsx) of our application as shown below:

next, I will then wrap the application with the provider as shown below:

After adding the provider, we will create a centralized atom that will hold the task data of the application. create a store folder on the src directory of the application. and add a file called taskStore.ts to that folder. add the code below to the file.

The code above simply shows a taskAtom created which comprises an object with a tasks property. the tasks property will hold the task data of the entire application. we also added interfaces that specify the properties that would be contained in a single task.

List Tasks

We will create a component that lista all tasks. To do this create a file called AllTasks.tsx in the Task folder under the components folder under the src directory of the project. In doing this, add the code below to the file.

From the code above:

  • we import the global taskAtom from the taskStore.ts file and supply it to the useAtom() hook in order to obtain the tasks value and a setter function that can update the value of the tasks.
  • On getting the value of the tasks, we display them on the component by mapping through the tasks in the array. In our case, we haven’t included a task so the tasks will be an empty array and will only display a “No Tasks Added” text.
An image of the All Tasks component which shows a list of tasks

An image of the All Tasks component which shows a list of tasks

We also included a floating button which when clicked, will route the user to a page that creates a task.

Create Task

We will create a component that allows a user to create a task. To do this create a file called createTask.tsx in the Task folder under the components folder under the src directory of the project. In doing this, add the code below to the file.

In the code above:

  • We imported our global taskAtom to the CreateTask component and supplied it to the useAtom() hook.
  • we created an onChange function that handles the addition of values to the form in the component.
  • We created a submitTask function which is invoked on the submission of a task. this function also appends the tasks and updates the global tasksAtom with the newly inserted task. It also persists the tasks to localStorage and routes the user back to the page that shows all tasks.
An image of the process of creating a task

An image of the process of creating a task

Edit Task

We will create a component that allows a user to edit an existing task. To do this create a file called editTask.tsx in the Task folder under the components folder under the src directory of the project. In doing this, add the code below to the file.

In the code above:

  • We imported our global taskAtom to the EditTask component and supplied it to the useAtom() hook.
  • On the useEffect hook, we find the specific task to edit using its id which was passed through the route.
  • We created an onChange function that handles the addition of values to the form in the component.
  • We created an editTask function which is invoked on the editing of a task. this function also appends the tasks and updates the global tasksAtom with the new edited task. It also persists the tasks to localStorage and routes the user back to the page that shows all tasks.                                     
An image of the process of editing a task

An image of the process of editing a task

View Task

We will create a component that allows a user to view a task. To do this create a file called viewTask.tsx in the Task folder under the components folder under the src directory of the project. after creating the file, add the code below to the file.

In the code above:

  • We imported our global taskAtom to the ViewTask component and supplied it to the useAtom() hook.
  • On the useEffect hook, we find the specific task we want to view using its id which was passed through the route.
An image of the process of viewing a task

An image of the process of viewing a task

Delete Task

We will implement the deletion of a task. This will be done on the AllTasks.tsx component which renders all tasks. update the file with the code below:

In the code above, we created a deleteTask function that deletes a task using its id. the function also appends the tasks and updates the global tasksAtom with the task. It also persists the updated tasks to localStorage.

                                   

An image of the process of deleting a task

An image of the process of deleting a task

Sample code Repository

Reference Links

Conclusion

In this tutorial, We learned how Jotai as a state management system works as well as illustrated how to build a simple task application with Jotai. Seeing the capabilities of Jotai shown in this article will encourage you to adopt Jotai as a state management solution for building your React application.

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

26.03.2024

An Introduction to Clustering in Node.js

Picture your Node.js app starts to slow down as it gets bombarded with user requests. It's like a traffic jam for your app, and no developer likes ...

15.03.2024

JAMstack Architecture with Next.js

The Jamstack architecture, a term coined by Mathias Biilmann, the co-founder of Netlify, encompasses a set of structural practices that rely on ...

Rendering Patterns: Static and Dynamic Rendering in Nextjs

Next.js is popular for its seamless support of static site generation (SSG) and server-side rendering (SSR), which offers developers the flexibility ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy