Understanding what are primitive and reference types helps to understand immutability better.

This is because Zustand/Redux works on the principle of Immutability and to better understand it and to avoid unusual code behavior, we should first need to understand immutability.

So let's get started.

There are two types of data types in JavaScript.

• Primitive Type

• Reference Type

Primitive Type:

A variable of primitive type stores a single value at a time. It includes number, string and boolean data type.

For example,

const number = 10;
const username = "David";
const isLoggedIn = true;

Reference Type:

A  variable of reference type stores more than one value at a time. It includes arrays, objects etc.

For example,

const obj = { name: "David", age: 20 };
const users = ["David", "Mike", "John"];

Take a look at the below code:

const obj1 = { name: "David", age: 20 };
const obj2 = obj1;
obj2.name = "Mike";

console.log(obj1); // { name: "Mike", age: 20 };
console.log(obj2); // { name: "Mike", age: 20 };
console.log(obj1 === obj2); // true

As you can see changing the name property of obj2 actually changes the name property of obj1 and comparing obj1 with obj2 returns true because both points to the same obj1 object.

This is because when we assign obj1 to obj2, we're not creating a copy of obj1 but obj2 will contain a reference of the obj1 so obj2 points to the same object where obj1 points.

Now take a look at the below code:

const items = ["tea", "coffee", "milk"];
const newItems = items;

newItems[2] = "oranges";
console.log(items); // ["tea", "coffee", "oranges"]
console.log(newItems); // ["tea", "coffee", "oranges"]
console.log(items === newItems); // true

As you can see changing the third element of the newItems array actually changes the original items array.

That's the reason arrays and objects are known as reference types.

In the above code examples, we've made changes to the obj1 object and items array so we've mutated them.

Making Reference Types Immutable

Even though objects and arrays are mutable, you can avoid mutation by using Immutable Patterns (Best Practice).

Instead of mutating the original, create a new object/array with changes.

Example: Array (immutably adding an item)

const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4]; // spread operator

console.log(originalArray); // [1, 2, 3] → unchanged
console.log(newArray);      // [1, 2, 3, 4]

Example: Object (immutably updating a property)

const originalObj = { name: "Alice", age: 25 };
const newObj = { ...originalObj, age: 26 };

console.log(originalObj); // { name: "Alice", age: 25 } → unchanged
console.log(newObj);      // { name: "Alice", age: 26 }

This is called immutable update pattern, very common in React, Redux, Zustand and similar libraries.

So, never mutate state directly , always return new objects/arrays.

❌ Bad: mutation
state.users.push(newUser);

✅ Good: immutability
state = { ...state, users: [...state.users, newUser] };