In this article, we will explore how Object.is() method is used in Zustand’s source code.

The above code snippet is picked from vanilla.ts

Object.is() method is used in setState (more articles on this later on).

Let’s first understand what an Object.is() method is.

Object.is()

The Object.is() static method determines whether two values are the same value.

The below example is picked from 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

Here is a bit complicated JSON example:


const jsonObject1 = {
    name: "foo",
    age: 30
};
 
const jsonObject2 = {
    name: "bar",
    age: 30
};
 
console.log(Object.is(jsonObject1, jsonObject2)); // false

Why does `Object.is()` return `false`?

Even though jsonObject1 and jsonObject2 have the same content, they are different objects in memory. In JavaScript, objects are compared by reference, not by their content. Since these two objects are stored at different memory locations, Object.is() returns false.

Object.is(nextState, state)

In the below code snippet from Zustand, the Object.is() method is used to determine whether the nextState is truly different from the current state before proceeding to update the state and notify listeners. This check is crucial for performance and avoiding unnecessary state updates.


const setState: StoreApi<TState>['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))
  }
}

The below image shows the Object.is() in action

To add the above log statements, I compiled Zustand using the command pnpm run build and copied the dist into examples/demo/src. Looks hacky, but hey we are experimenting and figuring out how Zustand works internally.


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

Calling inc somehow triggers the setState, we will figure out how in the upcoming articles.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects