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

so the listeners in Zustand are basically a Set. The above code snippet is picked from vanilla.ts

Set

The Set object lets you store unique values of any type, whether primitive values or object references. Set objects are collections of values. A value in the set may only occur once; it is unique in the set's collection. You can iterate through the elements of a set in insertion order. — MDN Docs

const mySet1 = new Set();
 
mySet1.add(1); // Set(1) { 1 }
mySet1.add(5); // Set(2) { 1, 5 }
mySet1.add(5); // Set(2) { 1, 5 }
mySet1.add("some text"); // Set(3) { 1, 5, 'some text' }
 
for (const item of mySet1) {
  console.log(item);
}
// 1, 5, 'some text'

listeners are added in a function subscribe in Zustand. Let’s take a closer look at subscribe

subscribe

How is subscribe used in a React project? the below explanation is picked from Zustand’s Readme.

The subscribe function allows components to bind to a state-portion without forcing re-render on changes. Best combine it with useEffect for automatic unsubscribe on unmount. This can make a drastic performance impact when you are allowed to mutate the view directly.

const useScratchStore = create((set) => ({ scratches: 0, ... }))
const Component = () => {
  // Fetch initial state
  const scratchRef = useRef(useScratchStore.getState().scratches)
  // Connect to the store on mount, disconnect on unmount, catch state-changes in a reference
  useEffect(() => useScratchStore.subscribe(
    state => (scratchRef.current = state.scratches)
  ), [])
  ...

Let’s now look at the subscribe source code in Zustand.

const subscribe: StoreApi<TState>['subscribe'] = (listener) => {
    listeners.add(listener)
    // Unsubscribe
    return () => listeners.delete(listener)
}

subscribe simply adds the listener to the listeners Set.

Let’s see what the logs from experimentation say. To add the console.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.

This is how the listeners Set looks like

I subscribed to changes in App.jsx

// Subscribe to changes in the state
useStore.subscribe((state) => {
  console.log("State changed: ", state);
});

Another observation is that, there is a additional listener that got added to this set:

ƒ () {
  if (checkIfSnapshotChanged(inst)) {
    forceStoreRerender(fiber);
  }
}

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#L62

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

3. https://github.com/pmndrs/zustand/tree/main?tab=readme-ov-file#transient-updates-for-often-occurring-state-changes