Concepts

Jotai is a library that will make you return to the basics of React development & keep everything simple.

From scratch

Before trying to compare Jotai with what we may have known previously, let's just dive straight into something very simple.

The React world is very much like our world, it's a big set of small entities, we call them components, and we know that they have their own state. Structuring your components to interact altogether will create your app.

Now, the Jotai world also has its small entities, atoms, and they also have their state. Composing atoms will create your app state!

Jotai considers anything to be an atom, so you may say: Huh, I need objects and arrays, filter them and then sort them out. And here's the beauty of it, Jotai gracefully lets you create dumb atoms derived from even more dumb atoms.

If, for example, I have a page with 2 tabs: online friends and offline friends. I will have 2 atoms simply derived from a common, dumber source.

const dumbAtom = atom([{ name: 'Friend 1', online: false }])
const onlineAtom = atom((get) => get(dumbAtom).filter((item) => item.online))
const offlineAtom = atom((get) => get(dumbAtom).filter((item) => !item.online))

And you could keep going on complexity forever.

Another incredible feature of Jotai is the built-in ability to suspend when using asynchronous atoms. This is a relatively new feature that needs more experimentation, but is definitely the future of how we will build React apps. Check out the docs for more info.