In this article, we review Jotai usage in Docmost.

We will discuss the following:

What is Jotai?
Jotai usage in Docmost.

What is Jotai?

Jotai takes an atomic approach to global React state management.

Build state by combining atoms and renders are automatically optimized based on atom dependency. This solves the extra re-render issue of React context, eliminates the need for memoization, and provides a similar developer experience to signals while maintaining a declarative programming model.

It scales from a simple useState replacement to an enterprise TypeScript application with complex requirements. Plus there are plenty of utilities and extensions to help you along the way!

Jotai is trusted in production at innovative companies like these:

Meta
Candycode
Adobe
TikTok

Install

npm install jotai

Create atoms

import { atom } from 'jotai'

const countAtom = atom(0)

const countryAtom = atom('Japan')

const citiesAtom = atom(['Tokyo', 'Kyoto', 'Osaka'])

export const animeAtom = atom([
  {
    title: 'Ghost in the Shell',
    year: 1995,
    watched: true
  },
  {
    title: 'Serial Experiments Lain',
    year: 1998,
    watched: false
  }
])

Derived atoms

const progressAtom = atom((get) => {
  const anime = get(animeAtom)
  return anime.filter((item) => item.watched).length / anime.length
})

Use atoms

import { useAtom } from 'jotai'

import { animeAtom } from './atoms'

const AnimeApp = () => {
  const [anime, setAnime] = useAtom(animeAtom)

  return (
    <>
      <ul>
        {anime.map((item) => (
          <li key={item.title}>{item.title}</li>
        ))}
      </ul>
      <button onClick={() => {
        setAnime((anime) => [
          ...anime,
          {
            title: 'Cowboy Bebop',
            year: 1998,
            watched: false
          }
        ])
      }}>
        Add Cowboy Bebop
      </button>
    </>
  )
}

I picked the above content from Jotai website.

Now that we understand the basics of Jotai, let’s see how this is implemented in Docmost codebase.

Jotai usage in Docmost

I searched for Jotai in the Docmost codebase and found the results as shown in the below image:

#1 use-auth.ts

In this docmost/client/hooks/use-auth.ts, Jotai is used as shown below:

import { useAtom } from "jotai";
...
const [, setCurrentUser] = useAtom(currentUserAtom);

#2 comments-list-item.tsx

In this docmost/client/hooks/comments/…/comments-list-item.tsx, Jotai is used as shown below:

import { useAtom, useAtomValue } from "jotai";
...
const [currentUser] = useAtom(currentUserAtom);

#3 use-toggle-sidebar.ts

in the use-toggle-sidebar.ts, Jotai is used as shown below:

import { useAtom } from "jotai";

export function useToggleSidebar(sidebarAtom: any) {
  const [sidebarState, setSidebarState] = useAtom(sidebarAtom);
  return () => {
    setSidebarState(!sidebarState);
  }
}

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@ramu-narasinga

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects