Jotai , A new state management library for React

React has awesome state management libraries like Redux , React Contexts , Unstated and many more…..

Recently, while scrolling through trending Github repos, I found another react state management library named Jotai.

So the first question came to my mind is what does the word Jotai means? After googling it , I found this is a Japanese word. It means State

So as the name suggests this is a state management library for react.

I found this library very easy as compared to other state management solutions. So lets take a look …..

Installing this library

Like every React library you can install it with npm

Using this library:

Suppose you want to create a basic counter application where on each button press , count increases by one

As we can see , we have created a atom for our counter. atom function can take any argument as its intial value for example:

Using the atom value

useAtom is very similar to useState. It provides us two items one for value and other for updating the value.

Updating the value

Updating value is simple. updateCounter takes a function with current value as argument and the next state value will be the returned value.

Some important things about the update function in Jotai

Suppose we have atom of array of movies see above (citiesAtom)

We want to add a new city in the list. So the basic idea comes to our mind is just push the new city into the array right? like this

const [cities,updateCities] = useAtom(citiesAtom);
updateCities(city=>city.push('Mumbai'));

But this is wrong. We should return a new array using ES6 methods like the spread operator (…) like this

const [cities,updateCities] = useAtom(citiesAtom);
updateCities(city=>[...city,'Mumbai']);

You can check out Jotai Here

This was my second Medium Article guys. There must be some mistakes do mention them below…..