JotaiJotai

상태
React를 위한 기본적이고 유연한 상태 관리

Cache

Jotai는 리렌더링을 최적화하기 위한 기본 함수를 제공합니다.
이 라이브러리는 오직 "현재" 아톰 값만 유지하도록 설계되었으며, 이전 값은 캐싱하지 않습니다.

캐싱은 때때로 유용할 수 있습니다. 예를 들어, 비동기 아톰이 네트워크 요청을 트리거하는 경우, 응답을 캐싱하고 싶을 수 있습니다.

jotai-cache는 이러한 사용 사례를 돕기 위한 서드파티 라이브러리입니다.

설치

npm install jotai-cache

atomWithCache

atomWithCache(read, options): Atom

atomWithCache는 캐시가 포함된 새로운 읽기 전용 아톰을 생성합니다.

파라미터

read: 읽기 전용 아톰을 정의하는 read 함수

options (선택 사항): 아톰의 동작을 커스터마이즈하기 위한 옵션 객체

옵션

size (선택 사항): 캐시 항목의 최대 크기.

shouldRemove (선택 사항): 캐시 항목을 제거할지 여부를 확인하는 함수.

areEqual (선택 사항): 아톰 값을 비교하는 함수.

예제

import { atom, useAtom } from 'jotai'
import { atomWithCache } from 'jotai-cache'


const idAtom = atom(1)


const normalAtom = atom(async (get) => {
  const id = get(idAtom)
  const response = await fetch(`https://reqres.in/api/users/${id}?delay=1`)
  return response.json()
})


const cachedAtom = atomWithCache(async (get) => {
  const id = get(idAtom)
  const response = await fetch(`https://reqres.in/api/users/${id}?delay=1`)
  return response.json()
})


const NormalUser = () => {
  const [{ data }] = useAtom(normalAtom)
  return (
    <div>
      <h1>User (normal atom)</h1>
      <ul>
        <li>ID: {data.id}</li>
        <li>First name: {data.first_name}</li>
        <li>Last name: {data.last_name}</li>
      </ul>
    </div>
  )
}


const CachedUser = () => {
  const [{ data }] = useAtom(cachedAtom)
  return (
    <div>
      <h1>User (cached atom)</h1>
      <ul>
        <li>ID: {data.id}</li>
        <li>First name: {data.first_name}</li>
        <li>Last name: {data.last_name}</li>
      </ul>
    </div>
  )
}


const App = () => {
  const [id, setId] = useAtom(idAtom)
  return (
    <div>
      ID: {id}{' '}
      <button type="button" onClick={() => setId((c) => c - 1)}>
        Prev
      </button>{' '}
      <button type="button" onClick={() => setId((c) => c + 1)}>
        Next
      </button>
      <hr />
      <Suspense fallback="Loading...">
        <CachedUser />
      </Suspense>
      <hr />
      <Suspense fallback="Loading...">
        <NormalUser />
      </Suspense>
    </div>
  )
}

Stackblitz

GitHubnpm