En este artículo, exploraremos cómo se utiliza el método Object.is() en el código fuente de Zustand.

El fragmento de código anterior se seleccionó de vanilla.ts

El método Object.is() se utiliza en setState (más artículos sobre esto más adelante).

Primero comprendamos qué es un método Object.is().

Objeto.is()

El método estático Object.is() determina si dos valores son el mismo valor.

El siguiente ejemplo está seleccionado de 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

Aquí hay un ejemplo JSON un poco complicado:

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

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

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

¿Por qué Object.is() devuelve falso?

Aunque jsonObject1 y jsonObject2 tienen el mismo contenido, son objetos diferentes en la memoria. En JavaScript, los objetos se comparan por referencia, no por su contenido. Dado que estos dos objetos se almacenan en diferentes ubicaciones de memoria, Object.is() devuelve false.

Object.is(siguienteEstado, estado)

En el siguiente fragmento de código de Zustand, el método Object.is() se utiliza para determinar si nextState es realmente diferente del estado actual antes de proceder a actualizar el estado y notificar a los oyentes. Esta verificación es crucial para el rendimiento y para evitar actualizaciones de estado innecesarias.

    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))
      }
    }

La siguiente imagen muestra Object.is() en acción

Para agregar las declaraciones de registro anteriores, compilé Zustand usando el comando pnpm run build y copié el dist en ejemplos/demo/src. Parece complicado, pero bueno, estamos experimentando y descubriendo cómo funciona Zustand internamente.

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

Llamar a inc de alguna manera activa setState, descubriremos cómo en los próximos artículos.

Sobre nosotros:

En Think Throo, tenemos la misión de enseñar las mejores prácticas inspiradas en proyectos de código abierto.

Mejore sus habilidades de codificación practicando conceptos arquitectónicos avanzados, aprenda las mejores prácticas y cree proyectos de nivel de producción.

Somos de código abierto — https://github.com/thinkthroo/thinkthroo (¡Danos una estrella!)

¿Necesitas ayuda con un proyecto de Next.js? Contáctenos en [email protected]

Sobre el autor:

Hola, soy Ram. Soy un apasionado ingeniero de software/OSS Tinkerer.

Visita mi sitio web: https://www.ramunarasinga.com/

Referencias:

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