Guided: State Management with Jotai

In this lab, you'll be creating a simple todo list app using React and Jotai.

To do this, you will utilize various Jotai hooks and features to build up an app that maintains state using Jotai, stores todo list items in a local storage, and enables filtering. You will explore and use Jotai's four core concepts: atom, useAtom, Store, and Provider. Additionally, you'll work with the specialized useAtomValue and useSetAtom hooks, which help optimize performance by preventing unnecessary component re-renders.

You will also learn how to use atomWithStorage to store data in the browser's local storage, and use atoms that are derived values rather than just state.

The lab is already set up with a React project using basic React concepts, not using Jotai. You can find the basic TodoList component inside components/TodoList.js.

You will need to open the app in a separate browser tab so that you can see the document title in the text of the tab. Whenever you see this link: Go to your app, you can click it open the app in a new browser tab.

To run the app:

1. Click the Run at the bottom of the Terminal.
2. Run the app by following the link Go to your app.

Move to the next step to begin!

In this first step of the lab, you will use Jotai's atom to store the state for the todo list app, instead of React's useState. Now you will use that atom to output the todo list.

There is already a starter code in the state\todoListAtom.js file, which exports three variables. For this step, you will only update the todoListAtom variable in the todoListAtom.js file.

One core concept in Jotai is called an atom, which represents a piece of state for the application. You will start by replacing useState with atom. Note that you'll centralize the calls to atom in the state\todoListAtom.js file.

To run your app you can go to your app. You won't get rid of useState just yet, so that the app doesn't error. Later you will get rid of those calls after you've replaced the functionality.

Now that you have the state stored as an atom, you’ll use it to display the todo list. Your todo list is now pulling from the Jotai atom! Notice though that, while the app doesn't error, nothing else works.

This is because the rest of the functionality is tied to the data in useState, not the data in the atom. You will fix that as you update the rest of the app.

The AddTodo component was previously using props to add new items to the todo list, and this state was managed locally with useState. You're now transitioning to using the centralized todoListAtom to manage the state across components.

In this step, you will use the useSetAtom hook, which is used when you are only setting (not reading) a value from an atom. Since you are only adding a todo in the AddTodo component, you don't need to read from the atom. The useSetAtom hook helps you avoid unnecessary re-renders by specifying that you are only updating the atom, and the component's output never uses the atom's data. Now when you go to your app you can add new todos! However when you refresh the page, the data resets. That was true when you started. Next you'll see how Jotai easily helps you fix that.

Now that you have transitioned the state management for the todo list to Jotai, you want to ensure the state is persistent. You'll complete the remaining functionality, such as marking todos as complete and deleting them, a little later.

State persistence means that when users refresh the page, their todo items should still be there. You will accomplish this by storing the todos in the browser's local storage and updating the local storage whenever the todos are updated.

This is quite simple, thanks to Jotai's atomWithStorage. Now when you go to your app you can add new todos and when you refresh the page, the data persists! Next you'll adjust how you're storing your state, utilizing Jotai's Store functionality.

Jotai allows you to create a centralized store to manage your atoms. This centralized store can help make your app more scalable and maintainable, particularly as the number of atoms grows. It also helps in debugging, as all the atoms are accessed through a single store.

Atoms are really just definitions of your state, stores let you control where that state is stored and how it is used.

You can create a store with createStore. You then can use that store using the Jotai Provider. You can even use different stores in different parts of your app by utilizing the Provider element in your JSX. By creating a Store and using a Provider, you are ensuring atoms referenced by descendants of the Provider are all referencing data in that Store. You can have multiple Stores in your app.

If you need to access store data outside of React, like in a utility function that does other work, you can use store.get and store.set to get and set values.

You don't really need that here, but in the next task you will try using it. When you go to your app you should see the Store data being logged to the console (more than once since you're in development mode in React, so components are called twice).

You won't use store.get or store.set for the rest of the lab, but it's good to know that they are there. Now you will get the rest of the functionality up and running!

You are successfully adding todos to the Store. In this step, you will fix the complete and delete functionalities of the todo list app. The toggleComplete function has been provided for you so you can examine it. Note that when you go to your app you can now toggle the status of the todos (completed or undo)!

Now you will enable the ability to delete todos. The removeTodo function has been provided in this case as well so you can examine it. The functionality of the todo list app is nearly complete! Now you need to enable filtering todos, using Jotai atoms.

In this last step of the lab, you'll enable filtering. Jotai allows for derived atoms, meaning atoms that return a value from a function, based on the actual stored data. Filtered data is a subset of the total data, thus perfect for a derived atom. You are using a string to specify what filter you want, and it has now been defined using atom and will be stored in the Jotai store. Now that you have a filter atom in Filter.js using filterListAtom, you will create a derived atom, which will be a function that will return a subset of todos based on which filter is chosen.

Jotai will update the derived atom whenever the atoms it uses are changed. In this case, the derived atom will use filterListAtom, so whenever that you change the chosen filter the derived atom will update. Note the derived atom uses todoListAtom and filterAtom to determine what todos to return. You now just need to use the filteredTodosAtom as the data powering TodoList.js to finish the lab!

You will use two different Jotai hooks. useAtomValue only reads the value from the atom, and useSetAtom only returns a function to set the atom. You will use useAtomValue to read from the derived atom, and useSetAtom to update the todos.

Using these hooks helps Jotai to determine when it can avoid React re-renders. When you go to your app you should now see that the todo list app is completely functional!

If you like, you can now remove all the useState code in App.js and update the JSX by removing references to the replaced functions.

The todo list app is complete and using Jotai! Congratulations, well done!