News

Dec 04, 2023

Exploring State Management in React Using Jotai: A Practical Guide

Level up your React app's state management with Jotai: a simpler alternative to Redux, and perfect for smaller projects! Managing state in small-scale projects is generally straightforward using React

Level up your React app's state management with Jotai: a simpler alternative to Redux, and perfect for smaller projects!

Managing state in small-scale projects is generally straightforward using React hooks and props. However, as the application grows and the need to share and access data across different components arises, it often leads to prop drilling. Unfortunately, prop drilling can quickly clutter the codebase and introduce scalability challenges.

While Redux offers a great state management solution, its API can be overwhelming for relatively small projects. In contrast, Jotai, a minimal state management library that leverages independent units of states called atoms to manage state, eliminates challenges like prop drilling and enables a more straightforward and scalable state management approach.

Jotai is a state management library that offers a simple state management solution in contrast to more complex alternatives like Redux. It utilizes independent units of state called atoms to manage state in the React application.

Ideally, different components in the application, access and update these atoms using a hook provided by Jotai called the useAtom. Here's a simple example of how to create a Jotai atom:

To access and work with atoms in Jotai, you can simply use useAtom hook which, like other React hooks, enables you to access and update the value of a state within a functional component.

Here's an example to demonstrate its usage:

In this example, the useAtom hook is used to access the countAtom atom and its associated value. The setCount function is used to update the value of the atom and any associated components will be automatically re-rendered with the updated value.

By only triggering the affected components, it reduces unnecessary re-renders across the application. This targeted approach to re-rendering enhances the overall performance of the application.

With the basics out of the way, let's build a simple To-do React app to better understand Jotai's state management capabilities.

You can find this project's source code in this GitHub repository.

To get started, create a React application. Alternatively, you can utilize Vite to set up a React project. Once you scaffold a basic React application, go ahead and install Jotai in your application.

Next, to utilize Jotai in your application, you need to wrap your entire app with the Provider component. This component contains the store that serves as the central hub for providing atom values throughout the application.

Additionally, it allows you to declare the initial state of atoms. By wrapping your app with the Provider, all components in the application gain access to the atoms you've defined, and they can then, interact with, and update the state through the useAtom hook.

Now wrap the application in the index.js or main.jsx as shown below.

The store acts as a central repository for the application's state. It typically contains the definition of atoms, selectors, and any other related functions required for state management using Jotai.

In this case, it manages the atoms for managing the list of items for the To-do application. In the src directory, create TodoStore.jsx file, and add the code below.

By creating and exporting the TodosAtom, you can comfortably interact and update the to-dos' state across different components in the application.

Now that you have configured Jotai in the React application and created an atom to manage the application's state, go ahead, and create a simple to-do component that will handle the add, delete, and edit functionalities for the to-do items.

Create a new components/Todo.jsx file in the src directory. In this file, add the code below:

The handleAdd function is responsible for adding a new to-do item to the list of items. First, it checks if the variable's value is not empty. Then it creates a new to-do item with a unique ID and the entered to-do item as its content.

The setTodos function is then called to update the list of to-do items in the atom by appending the new item. Lastly, the value state is reset to an empty string after the addition operation.

On the other hand, the handleDelete function is responsible for removing a to-do item from the list. It filters out the to-do item using the specified ID from the existing list by utilizing the prevTodos.filter method. It then updates the list using the setTodos function—effectively deleting the specified to-do item from the list.

This guide has provided an introduction to using Jotai as a state management solution. Nonetheless, there are other great features such as the ability to create asynchronous atoms specifically designed for managing state that involves asynchronous operations such as API calls.

Additionally, you can also create derived atoms, which are used to compute and derive values from existing atoms, allowing you to manage complex states based on other parts of the application.

By leveraging these state management features, you can create more robust and scalable React applications.

Gichuhi Wachira holds a Bachelor of Science degree in Computer Science and works as a front-end developer and technical writer with over two years of writing experience.He writes about various web and cloud technologies, as well as programming concepts, for MUO. Besides writing or tinkering with new technologies, he spends his time outdoors.