Neste artigo, exploraremos como o método Object.is() é usado no código-fonte do Zustand.

O snippet de código acima foi escolhido em vanilla.ts

Object.is() é usado em setState (mais artigos sobre isso posteriormente).

Vamos primeiro entender o que é um método Object.is().

Objeto.is()

O método estático Object.is() determina se dois valores são iguais.

O exemplo abaixo foi retirado do MDN Docs:

    console.log(Object.is('1', 1));
    // Expected output: false

    console.log(Object.is(NaN, NaN));
    // Expected output: true

    console.log(Object.is(-0, 0));
    // Expected output: false

    const obj = {};
    console.log(Object.is(obj, {}));
    // Expected output: false

Aqui está um exemplo JSON um pouco complicado:

    const jsonObject1 = {
        name: "foo",
        age: 30
    };

    const jsonObject2 = {
        name: "bar",
        age: 30
    };

    console.log(Object.is(jsonObject1, jsonObject2)); // false

Por que Object.is() retorna falso?

Mesmo que jsonObject1 e jsonObject2 tenham o mesmo conteúdo, eles são objetos diferentes na memória. Em JavaScript, os objetos são comparados por referência, não por seu conteúdo. Como esses dois objetos são armazenados em locais de memória diferentes, Object.is() retorna false.

Object.is(próximoEstado, estado)

No trecho de código abaixo de Zustand, o método Object.is() é usado para determinar se o nextState é realmente diferente do estado atual antes de prosseguir com a atualização do estado e notificar os ouvintes. Essa verificação é crucial para o desempenho e para evitar atualizações de estado desnecessárias.

    const setState: StoreApi['setState'] = (partial, replace) => {
      // TODO: Remove type assertion once https://github.com/microsoft/TypeScript/issues/37663 is resolved
      // https://github.com/microsoft/TypeScript/issues/37663#issuecomment-759728342
      const nextState =
        typeof partial === 'function'
          ? (partial as (state: TState) => TState)(state)
          : partial
      if (!Object.is(nextState, state)) {
        const previousState = state
        state =
          (replace ?? (typeof nextState !== 'object' || nextState === null))
            ? (nextState as TState)
            : Object.assign({}, state, nextState)
        listeners.forEach((listener) => listener(state, previousState))
      }
    }

A imagem abaixo mostra Object.is() em ação

Para adicionar as instruções de log acima, compilei o Zustand usando o comando pnpm run build e copiei o dist em exemplos/demo/src. Parece hacky, mas estamos experimentando e descobrindo como o Zustand funciona internamente.

    const useStore = create((set) => ({
      count: 1,
      inc: () => set((state) => ({ count: state.count   1 })),
    }))

Chamar inc de alguma forma aciona o setState, descobriremos como nos próximos artigos.

Sobre nós:

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

Melhore suas habilidades de codificação praticando conceitos arquitetônicos avançados, aprenda as práticas recomendadas e crie projetos de nível de produção.

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

Precisa de ajuda com um projeto Next.js? Contate-nos em [email protected]

Sobre o autor:

Ei, meu nome é Ram. Sou um apaixonado engenheiro de software/OSS Tinkerer.

Confira meu site: https://www.ramunarasinga.com/

Referências:

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L71

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value_equality_using_object.is