원시 아톰(primitive atom)을 정의할 때, 초기값은 정의 시점에 바인딩되어야 합니다.
만약 초기값을 생성하는 데 계산 비용이 많이 들거나, 정의 시점에 값에 접근할 수 없는 경우, 아톰의 초기화를 스토어에서 첫 사용 시점까지 미루는 것이 가장 좋습니다.

const imageDataAtom = atom(initializeExpensiveImage()) // 1) 여기서 계산해야 함

function Home() {
  ...
}

function ImageEditor() {
  // 2) 이 라우트에서만 사용됨
  const [imageData, setImageData] = useAtom(imageDataAtom);
  ...
}

function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/edit" component={ImageEditor} />
    </Router>
  )
}

atomWithLazy

참조: https://github.com/pmndrs/jotai/pull/2465

atomWithLazy를 사용하면 초기값이 스토어에서 처음 사용될 때 계산되는 원시 아톰을 생성할 수 있습니다. 초기화 후에는 일반적인 원시 아톰처럼 동작하며(쓰기가 가능함), 값을 변경할 수 있습니다.

사용법

import { atomWithLazy } from 'jotai/utils'

// 초기화 함수 전달
const imageDataAtom = atomWithLazy(initializeExpensiveImage)

function Home() {
  ...
}

function ImageEditor() {
  // 사용자가 `/edit`로 이동할 때만 초기화됨
  const [imageData, setImageData] = useAtom(imageDataAtom);
  ...
}

function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/edit" component={ImageEditor} />
    </Router>
  )
}

여러 개의 스토어 사용하기

각 스토어는 독립적인 공간이기 때문에, 초기값은 스토어마다 정확히 한 번씩 재생성됩니다. (jotai-scope와 같은 도구를 사용하지 않는 한, 이는 스토어를 더 작은 공간으로 나누는 역할을 합니다.)

type RGB = [number, number, number];

function randomRGB(): RGB {
  ...
}

const lift = (value: number) => ([r, g, b]: RGB) => {
  return [r + value, g + value, b + value]
}

const colorAtom = lazyAtom(randomRGB)

let store = createStore()

console.log(store.get(colorAtom)) // [0, 36, 128]
store.set(colorAtom, lift(8))
console.log(store.get(colorAtom)) // [8, 44, 136]

// 스토어를 다시 생성하는 경우, 로그아웃하거나 앱을 리셋할 때 종종 발생
store = createStore()

console.log(store.get(colorAtom)) // [255, 12, 46] -- 새로운 랜덤 색상