What Makes Jotai So Amazing?

I still remember the first time I encountered a massive big corporate grade level application that used that acursed state management library that we’ve all grown to hate. I think every seasoned react developer knows precisely what library I’m talking about. It’s the one that starts with an R and ends with edux. I could not understand nor comprehend why the levels of complexity, abstraction and boilerplate were necessary to achieve the simplest of tasks.

Sadly there was no chance of changing the state management library for this project as it was deeply ingrained in an enterprise level application at my at the time very corporatey job. I had to learn to live with it and I did. I learned to use it, I learned to understand it and most of all. I learned to hate it.

SIDE NOTE: Redux Toolkit is great and fixes a lot of the issues I originally had with Redux.

The fault was my own, partly.

Now I was already a senior developer at the time, but we’re all different and we all think in different ways and patterns. The Redux way was simply incompatible with my way of tackling problems. I like to break things down into smaller pieces and or atoms if you will. I like to keep things simple and as self contained as possible. This line of reasoning I generally apply to most things in life.

Enter Jotai

I kept up to date with Meta’s (then facebook) development of Recoil. Even did a few projects with it and absolutely loved it. The atomic approach to state management was exactly what I was looking for, recoil was great. But it was still in beta and that’s a difficult sell to a corporate client.

Then I found Jotai. It was everything I loved about Recoil but it was production ready. It was simple, it was atomic and it was easy to use. I was sold. I’ve been using Jotai ever since and I’ve never looked back.

There are numerous reasons why I love Jotai and hopefully in this list you the reader will find something that resonates with you.

What is Jotai?

Jotai is a minimalistic and modern state management library designed for React applications, emphasizing simplicity and efficiency. It introduces the concept of atoms as the fundamental units of state, which can be independently created, updated, and shared across components. This atom-based approach allows for fine-grained state management, enabling components to subscribe to only the pieces of state they need, resulting in optimized re-renders and improved application performance. Jotai’s lightweight and intuitive API makes it an attractive choice for developers seeking a straightforward yet powerful solution to managing state in React, offering a balance between ease of use and flexibility without the boilerplate code often associated with other state management libraries.

Simplicity and Minimalism

Jotai is predicated on a straightforward principle: managing state should not be complicated. With Jotai, state is managed using atoms. An atom is an independent piece of state; think of it as a building block that can be shared across components. This simplicity is refreshing, especially when compared to the verbosity and boilerplate code often associated with other state management libraries.

In essence an atom is a simple function that returns a tuple of a state and a setter. This is the most basic building block of Jotai and it’s all you need to get started. It’s as simple as:

import { atom } from 'jotai'

const countAtom = atom(0)

// This should be in a separate component file
const Counter = () => {
  const [count, setCount] = useAtom(countAtom)
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount((c) => c + 1)}>
        increment
      </button>
    </div>
  )
}

That is it, that’s all you need to get started with Jotai. To a react developer of any seniority the above may look strangely familiar and that’s because it is. It’s the same basic pattern as useState except without the limitations of it only being available to the component it’s declared in aka local state, an atom can be shared across components aka global state.

Expanding on the above we can use the very same atom in another component and it will share the same state.

const AnotherCounter = () => {
  const [count, setCount] = useAtom(countAtom)
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount((c) => c + 1)}>increment</button>
    </div>
  )
}

And all it took was a single line of code to define the atom and a single line of code to use it. This is the simplicity and minimalism that I love about Jotai.

Fine-grained State Updates

One of the most compelling features of Jotai is its approach to updating state. Since state is managed on a per-atom basis, React components subscribe only to the atoms they use. When an atom’s state changes, only the components using that atom re-render. This fine-grained approach to state updates can lead to significant performance improvements in complex applications.

In other words, you can really fine tune your state updates and only re-render the components that need to be re-rendered. Combine that with a properly composed react application and you have a recipe for a very performant application.

Developer Experience

Jotai has been a game-changer for my productivity and overall developer experience. Its API is intuitive and unobtrusive, allowing me to focus more on the logic of my application rather than on managing state. The learning curve is gentle, especially for those already familiar with React’s hooks, making it accessible to newcomers and seasoned developers alike.

Speaking of react hooks!

Hooks

Jotai is built on top of React’s hooks, which makes it a natural fit for React developers. The library’s useAtom hook is the primary means of interacting with atoms, and it’s a joy to use. It’s a simple and elegant way to access and update state, and it’s a testament to the power of hooks in React.

Not to mention that you can use jotai in any custom hook you can think of. This makes it very easy to compose your own hooks and share them across your application.

Flexibility and Compatibility

Jotai doesn’t lock you into a specific architecture or force you to refactor your entire application to fit its model. It works seamlessly alongside existing state management solutions, making it easy to adopt incrementally. Moreover, Jotai is compatible with both functional components and class components, ensuring that it fits into any React project regardless of its structure.

Embracing React’s Concurrent Mode

Looking towards the future, Jotai is designed with React’s concurrent mode in mind. This means that applications using Jotai are set to benefit from the enhanced performance and responsiveness that concurrent mode promises, without requiring major refactors or adjustments to state management strategies.

Composition

Jotai’s atoms can be composed together to create more complex state structures. This composability is a powerful feature that allows for the creation of sophisticated state management solutions without sacrificing simplicity or readability.

Conclusion

Jotai represents a significant step forward in the evolution of state management within the React ecosystem. Its emphasis on simplicity, performance, and developer experience makes it an attractive option for projects of all sizes. Whether you’re building a small hobby project or a large-scale enterprise application, Jotai offers a refreshing and powerful approach to managing state. It’s not just a tool in my development toolkit; it’s a joy to use, and that’s why I love Jotai.