state-management

State Management with Jotai

This project uses Jotai for state management with custom utilities and patterns.

Core Setup

Global Store: Use jotaiStore from src/lib/jotai.ts

import { jotaiStore } from '~/lib/jotai'

Custom Hook Utility: Use createAtomHooks for consistent atom patterns

import { createAtomHooks } from '~/lib/jotai'

const [useMyAtom, useSetMyAtom, useMyAtomValue, myAtom] = createAtomHooks(atom(null))

Atom Organization

Atom Location: Store atoms in src/atoms/ directory

// File: src/atoms/user.ts
import { atom } from 'jotai'

export const userAtom = atom(null)
export const isLoggedInAtom = atom((get) => get(userAtom) !== null)

Usage Patterns

Reading State:

import { useAtomValue } from 'jotai'
import { userAtom } from '~/atoms/user'

function UserProfile() {
  const user = useAtomValue(userAtom)
  return <div>{user?.name}</div>
}

Writing State:

import { useSetAtom } from 'jotai'
import { userAtom } from '~/atoms/user'

function LoginForm() {
  const setUser = useSetAtom(userAtom)
  
  const handleLogin = (userData) => {
    setUser(userData)
  }
}

Reading and Writing:

import { useAtom } from 'jotai'
import { userAtom } from '~/atoms/user'

function UserSettings() {
  const [user, setUser] = useAtom(userAtom)
  
  const updateUser = (updates) => {
    setUser({ ...user, ...updates })
  }
}

Advanced Patterns

Derived Atoms:

import { atom } from 'jotai'

const countAtom = atom(0)
const doubledAtom = atom((get) => get(countAtom) * 2)

Async Atoms:

const userIdAtom = atom(1)
const userAtom = atom(async (get) => {
  const userId = get(userIdAtom)
  return fetchUser(userId)
})

Write-Only Atoms:

const writeOnlyAtom = atom(
  null, // no read function
  (get, set, newValue) => {
    // write logic
    set(someOtherAtom, newValue)
  }
)

Provider Setup