atomWithCompare는 커스텀 비교 함수 areEqual(prev, next)가 false를 반환할 때만 업데이트를 트리거하는 아톰을 생성합니다.

이 기능은 애플리케이션에 중요하지 않은 상태 변경을 무시함으로써 원치 않는 리렌더링을 방지하는 데 도움을 줄 수 있습니다.

참고: Jotai는 내부적으로 상태 변경 시 Object.is를 사용하여 값을 비교합니다. 만약 areEqual(a, b)가 false를 반환하지만 Object.is(a, b)가 true를 반환한다면, Jotai는 업데이트를 트리거하지 않습니다.

import { atomWithReducer } from 'jotai/utils'

export function atomWithCompare<Value>(
  initialValue: Value,
  areEqual: (prev: Value, next: Value) => boolean,
) {
  return atomWithReducer(initialValue, (prev: Value, next: Value) => {
    if (areEqual(prev, next)) {
      return prev
    }

    return next
  })
}

다음은 얕은 비교(shallow-equal)를 통해 업데이트를 무시하는 아톰을 만드는 방법입니다:

import { atomWithCompare } from 'XXX'
import { shallowEquals } from 'YYY'
import { CSSProperties } from 'react'

const styleAtom = atomWithCompare<CSSProperties>(
  { backgroundColor: 'blue' },
  shallowEquals,
)

컴포넌트에서 사용하는 예제:

const StylePreview = () => {
  const [styles, setStyles] = useAtom(styleAtom)

  return (
    <div>
      <div styles={styles}>Style preview</div>

      {/* 이 버튼을 두 번 클릭해도 한 번만 렌더링됩니다 */}
      <button onClick={() => setStyles({ ...styles, backgroundColor: 'red' })}>
        배경을 빨간색으로 설정
      </button>

      {/* 이 버튼을 두 번 클릭해도 한 번만 렌더링됩니다 */}
      <button onClick={() => setStyles({ ...styles, fontSize: 32 })}>
        글꼴 크기 키우기
      </button>
    </div>
  )
}