Jotai

• Simple global use and setState that optimizes by usage of use and setState

• a jotai/utils bundle includs functions for persisting in localStorage, hydrating during SSR, and Redux-like reducers and actions

Create atoms

const countryAtom = atom('Japan')

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

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

Use atoms

import { useAtom } from 'jotai'

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

const ProgressTracker = () => {
  const progress = useAtomValue(progressAtom)

const AddAnime = () => {
  const setAnime = useSetAtom(animeAtom)