Neste artigo, entenderemos o caso de teste escrito para validar createWithEqualityFn que evita a nova renderização com base em uma condição e uma função de igualdade que você pode passar.

O código abaixo foi escolhido em 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 (
      

        renderCount: {  renderCount}, value: {item.value}
      
    )
  }

  const { findByText } = render(
    
      
    >,
  )

  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 usa Vitest para suas necessidades de teste. Vamos examinar o trecho de código acima.

Inicializar createWithEqualityFn

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

createWithEqualityFn é inicializado com state () => ({ item: { value: 0 } }) e a função de igualdade é Object.is

createWithEqualityFn aceita duas variáveis, createState e defaultEqualityFn.

Evitar nova renderização

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

useBoundStore aceita o seletor e a função de igualdade que é usada para evitar a nova renderização com base no valor correspondente.

O exemplo acima em basic.test é usado para evitar nova renderização quando o valor for 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')

Essas afirmações validam que a atualização do estado não causa nenhuma nova renderização.

Sobre nós:

No Think Throo, temos a missão de ensinar as melhores práticas inspiradas em projetos de código aberto.

10x suas habilidades de codificação praticando conceitos de arquitetura avançados em Next.js/React, aprenda as melhores práticas e crie projetos de nível de produção.

Somos de código aberto - https://github.com/thinkthroo/thinkthroo (Dê-nos uma estrela!)

Aprimore sua equipe com nossos cursos avançados baseados na arquitetura de base de código. Entre em contato conosco pelo e-mail [email protected] para saber mais!

Referências:

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

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