useHydrateAtoms

참고: https://github.com/pmndrs/jotai/issues/340

사용법

import { atom, useAtom } from 'jotai'
import { useHydrateAtoms } from 'jotai/utils'

const countAtom = atom(0)
const CounterPage = ({ countFromServer }) => {
  useHydrateAtoms([[countAtom, countFromServer]])
  const [count] = useAtom(countAtom)
  // count는 `countFromServer`의 값을 가지며, 0이 아님.
}

useHydrateAtoms의 주요 사용 사례는 Next.js와 같은 SSR 앱입니다. 서버에서 초기 값을 가져와 컴포넌트에 props로 전달할 수 있습니다.

⚠️ 주의: "hydrate"라는 용어가 서버 측 사용을 암시할 수 있지만, 이 훅은 클라이언트 측 코드를 위해 설계되었으며 'use client' 지시어와 함께 사용해야 합니다.

// 정의
function useHydrateAtoms(
  values: Iterable<readonly [Atom<unknown>, unknown]>,
  options?: { store?: Store },
): void

이 훅은 [atom, value] 튜플의 iterable과 선택적 옵션을 인자로 받습니다.

// 배열과 함께 사용, 스토어 지정
useHydrateAtoms(
  [
    [countAtom, 42],
    [frameworkAtom, 'Next.js'],
  ],
  { store: myStore },
)
// 또는 맵과 함께 사용
useHydrateAtoms(new Map([[count, 42]]))

아톰은 스토어당 한 번만 hydrate될 수 있습니다. 따라서 리렌더링 중에 초기 값이 변경되더라도 아톰 값은 업데이트되지 않습니다. 이전에 hydrate된 아톰을 다시 hydrate해야 하는 특별한 필요가 있다면, dangerouslyForceHydrate 옵션을 true로 설정하세요. 단, 동시 렌더링에서 잘못 동작할 수 있음을 유의하세요.

useHydrateAtoms(
  [
    [countAtom, 42],
    [frameworkAtom, 'Next.js'],
  ],
  {
    dangerouslyForceHydrate: true,
  },
)

여러 스토어에서 hydrate해야 하는 경우, 여러 useHydrateAtoms 훅을 사용하여 이를 달성할 수 있습니다.

useHydrateAtoms([
  [countAtom, 42],
  [frameworkAtom, 'Next.js'],
])
useHydrateAtoms(
  [
    [countAtom, 17],
    [frameworkAtom, 'Gatsby'],
  ],
  { store: myStore },
)

TypeScript를 ES5 타겟으로 사용하는 경우, 튜플 타입을 유지하기 위해 배열에 as const 캐스트가 필요할 수 있습니다.

useHydrateAtoms([
  [countAtom, 42],
  [frameworkAtom, 'Next.js'],
] as const)

또는 useHydrateAtoms에 아톰 값을 전달할 때 맵을 사용해야 할 수도 있습니다. Initializing State on Render 문서에서 작동하는 예제를 찾을 수 있습니다.

데모

더 많은 예제는 Next.js 섹션에서 확인할 수 있습니다.