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

The above code snippet is from vanilla.ts, when you set a state, Object.assign is used to update your state object.

Let’s first understand the basics of Object.assign:

Object.assign()

The Object.assign() static method copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
 
const returnedTarget = Object.assign(target, source);
 
console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }
 
console.log(returnedTarget === target);
// Expected output: true

b value in the target object is replaced with b value in source object.

Really simple right? let’s now run some experiments and understand how Zustand’s setState leverages Object.assign() method.

Object.assign() in Zustand’s source code:

// pulled from: https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76
state = (replace != null ? 
              replace : 
              typeof nextState !== "object" || 
              nextState === null) ? 
                nextState : 
                Object.assign({}, state, nextState);

That’s nested ternary operator there in the above code snippet. if the replace is not null, state will be replace or if the nextState is not an object, just return nextState as is but what we are interested in is Object.assign({}, state, newState).

Let’s first log and see what is in state and nextState when you update your state. The example I picked is from demo example in Zustand’s source code. I modified the code a bit so we can put some console statements and run these experiments.

In this simple example, when the count is incremented, it comes down to updating the state object using Object.assign.

Next time, you are trying to perform some updates on your JSON object, use the Object.assign.

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

References:

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

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