DEV Community

Cover image for createWithEqualityFn test case in Zustand explained.
thinkThroo
thinkThroo

Posted on

createWithEqualityFn test case in Zustand explained.

In this article, we will understand the test case written to validate the createWithEqualityFn that prevents re-render based on a condition and an equality function that you can pass.

The below code is picked from 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')
})
Enter fullscreen mode Exit fullscreen mode

Zustand uses Vitest for its testing needs. Let’s go through the above code snippet.

Initialiize createWithEqualityFn

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

createWithEqualityFn is initialized with the state () => ({ item: { value: 0 } }) and the equality function is Object.is

Image description

createWithEqualityFn accepts two variables, createState and defaultEqualityFn.

Prevent re-render

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

useBoundStore accepts the selector and the equality function that is used to prevent re-render based on the matching value.

The above example in the basic.test is used to prevent re-render when the value is 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')
Enter fullscreen mode Exit fullscreen mode

These assertions validate that state update does not cause any re-render.

About us:

At Think Throo, we are on a mission to teach the best practices inspired by open-source projects.

10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.

We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)

Up skill your team with our advanced courses based on codebase architecture. Reach out to us at hello@thinkthroo.com to learn more!

References:

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

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

Top comments (0)