Zustand의 createWithEqualityFn 테스트 케이스가 설명되었습니다.

이 글에서는 조건에 따라 재렌더링을 방지하는 createWithEqualityFn을 검증하기 위해 작성된 테스트 케이스와 통과할 수 있는 동등 함수를 이해하겠습니다.

아래 코드는 basic.test.ts에서 선택되었습니다

it('uses the store with a selector and equality checker', async () => {
  const useBoundStore = createWithEqualityFn(
    () => ({ item: { value: 0 } }),
    Object.is,
  )
  const { setState } = useBoundStore
  let renderCount = 0

  function Component() {
    // Prevent re-render if new value === 1.
    const item = useBoundStore(
      (s) => s.item,
      (_, newItem) => newItem.value === 1,
    )
    return (
      <div>
        renderCount: {++renderCount}, value: {item.value}
      </div>
    )
  }

  const { findByText } = render(
    <>
      <Component />
    </>,
  )

  await findByText('renderCount: 1, value: 0')

  // This will not cause a re-render.
  act(() => setState({ item: { value: 1 } }))
  await findByText('renderCount: 1, value: 0')

  // This will cause a re-render.
  act(() => setState({ item: { value: 2 } }))
  await findByText('renderCount: 2, value: 2')
})

Zustand는 테스트 요구사항으로 Vitest를 사용합니다. 위 코드를 살펴보겠습니다.

createWithEqualityFn 초기화

const useBoundStore = createWithEqualityFn(
    () => ({ item: { value: 0 } }),
    Object.is,
  )

createWithEqualityFn은 상태() => ({ 항목: { 값: 0 } }) 및 동등 함수는 Object.is

createWithEqualityFn은 createState와 defaultEqualityFn이라는 두 가지 변수를 허용합니다.

재렌더링 방지

// Prevent re-render if new value === 1.
    const item = useBoundStore(
      (s) => s.item,
      (_, newItem) => newItem.value === 1,
    )

useBoundStore는 일치하는 값에 따라 다시 렌더링되는 것을 방지하는 데 사용되는 선택기와 동등 기능을 허용합니다.

basic.test의 위 예시는 값이 1일 때 재렌더링을 방지하기 위해 사용되었습니다.

await findByText('renderCount: 1, value: 0')

// This will not cause a re-render.
act(() => setState({ item: { value: 1 } }))
await findByText('renderCount: 1, value: 0')

// This will cause a re-render.
act(() => setState({ item: { value: 2 } }))
await findByText('renderCount: 2, value: 2')

이러한 주장은 상태 업데이트로 인해 다시 렌더링이 발생하지 않음을 검증합니다.

회사 소개:

Think Throo에서는 오픈 소스 프로젝트에서 영감을 받은 모범 사례를 가르치는 임무를 수행하고 있습니다.

Next.js/React에서 고급 아키텍처 개념을 연습하여 코딩 기술을 10배로 늘리고 모범 사례를 배우고 프로덕션급 프로젝트를 구축하세요.

저희는 오픈 소스입니다 — https://github.com/thinkthroo/thinkthroo(별표를 주세요!)

코드베이스 아키텍처를 기반으로 한 고급 과정을 통해 팀의 기술을 향상하세요. 자세한 내용은 hello@thinkthroo.com으로 문의하세요!

참고자료:

1. https://github.com/pmndrs/zustand/blob/main/tests/basic.test.tsx#L92

2. https://vitest.dev/guide/

위 내용은 Zustand의 createWithEqualityFn 테스트 케이스가 설명되었습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!