Why Jotai is better than Redux?

it’s been a while since I've been using Redux & it was really a lifesaver in most of my projects. a couple of days ago one of my friends told me that he is using Jotai and if I use this library over Redux I would never use Redux again. well, he was right. Jotai is so much easier to use & it made 5 components into 5 lines of code!

so let me explain more about this amazing library.

What is Jotai?

Jotai is a state management library for React applications. It provides a way to manage and share state in a React application but with some key differences:

1- Atom-Based State:

Jotai is based on the concept of atoms. Atoms are units of state that can be read and updated independently. You can think of them as individual pieces of state that you can create, modify, and combine. so basically you can save data in your state like when you use “useState()” but now you just write “useAtom()”.

2- Simplicity:

Jotai aims to provide a simpler and more intuitive API for state management in React. It’s designed to be less boilerplate-heavy than some other state management solutions, making it easier to work with.

3- Immutable:

Jotai promotes immutability by default. When you update an atom, you create a new value rather than mutating the existing one. This helps with predictable state changes and better integration with the React rendering model.

4- Integration with Suspense:

Jotai is designed to work well with React’s Suspense feature, which allows for more efficient and responsive data fetching and rendering.

5- Small Bundle Size:

Jotai is known for having a small bundle size, making it a good choice for projects where minimizing the size of the JavaScript bundle is a concern.

6- Developer-Friendly:

Jotai is designed to be developer-friendly and follows a more functional programming style, which some developers find more intuitive and readable.

Let’s use it!

so first let's install it:

npm install jotai
// or 
yarn add jotai

after that, we have to make a component that contains our data. for example I named it jotaiData.

import { atom } from "jotai";

const Atomdata = atom([]);

export { Atomdata };

now I have my empty array. here I save my data. now in my main component I will import it so that I can use it. but I also should import the useAtom too. it’s exactly like useState as I said.

import { useAtom } from "jotai";
import { Atomdata } from "./myJotaiComponent/JotaiData";

and now I can write an atom useState and pass my Atomdata to it.

 const [data, setData] = useAtom(Atomdata);

Now whenever I update my “data” with setData, the new data will be saved in my AtomData. easy huh?

Can we save data like Redux-persist?

Of course you can! let me show you.

so instead of writing atom and then your state you need to implement two changes. first, you have to replace the atom with atomWithStorage that you can import it from “jotai/utils”. Also, your data should have a name now. like this:

import { atomWithStorage } from "jotai/utils";

const Atomdata = atomWithStorage("test", []);

export { Atomdata };

Here I named my data “test”. and that it! now if you refresh that web data will not disappear.

You can read more about Jotai here.

thanks for reading. was it useful? don’t forget to support🙏❤