How Zustand stores data accross different components

State management in React often involves tools like Redux or the Context API. But Zustand offers a simpler, lightweight alternative that’s both flexible and powerful. Let’s dive into how Zustand works under the hood, focusing on how it stores data, enables accessibility across components, and triggers re-renders efficiently.

How Zustand Stores Data and Shares It Across Components

At its core, Zustand uses JavaScript closures to encapsulate state and provide controlled access to it. Closures allow Zustand to create a private scope for the state, which can then be accessed through specific methods.

What is a Closure?

A closure is a function that "remembers" the variables from its lexical scope even after the scope has exited. This feature makes it possible to encapsulate state while exposing only the parts you want

Example of a Closure:

function createCounter() { 
   let count = 0; // The 'count' variable is "closed over" by the inner function. 
   return function increment() { 
   count += 1; 
   return count; 
   } 
} 
   
const counter = createCounter(); 
console.log(counter()); // Output: 1 
console.log(counter()); // Output: 2 
console.log(counter());
        

The closure pattern also provides these benefits:

• Memory Efficiency: Each store maintains only one copy of the state, regardless of how many components subscribe to it.
• Encapsulation: The actual state is private and can only be modified through the provided methods.
• Flexible Updates: The closure enables both synchronous and asynchronous state updates while maintaining consistency.

In Zustand, the store is essentially a closure that holds the state and methods to interact with it. Here, the useStore hook allows access to count and increment across components while keeping the state private.

Zustand’s Create Store Mechanism is a Closure

When you call create in Zustand, it returns a custom hook (like useStore) that:

• Encapsulates the state within a closure.
• Exposes methods for reading and updating the state.

Triggering Re-Renders in Zustand

Zustand ensures efficient re-renders by:

• Using shallow or deep comparisons to detect changes.
• Subscribing components to specific parts of the state.

Selectors for Fine-Grained Subscriptions

Selectors enable components to subscribe to specific slices of the state, avoiding unnecessary re-renders.

const count = useStore((state) => state.count); // Subscribes only to 'count'

When the count property changes, the component re-renders. Other changes in the state won’t trigger updates.

Never do as below; This will trigger re-render on any state variable change.

const state = useStore() // Bad code

Deep Comparison

Zustand uses shallow comparison by default to determine if a state slice has changed. This ensures performance without deep comparisons unless explicitly needed.

Pass a second argument as a comparison function to tell Zustand how to compare previous and next state.

const count = useStore(
  (state) => state.count,
  (oldState, newState) => deepCompare(oldState, newState) // Custom comparison function
);

Listeners and Subscribers (Optional)

React.useEffect(() => {
    const unsubscribe = useStore.subscribe(
      (state) => state.count,  // The state you want to track
      (newCount, oldCount) => {
        console.log('Count changed from', oldCount, 'to', newCount);
      }
    );

    // Cleanup the subscription when the component unmounts
    return () => unsubscribe();
  }, []);

Zustand maintains a list of subscribers for each state change. When a state update occurs, it notifies only the relevant subscribers.

This listener logs every state update without affecting component re-renders.

Putting It All Together: Creating a Zustand Store

Here’s an example of a complete Zustand store with efficient subscriptions and updates:

const createStoreImpl = (createState) => {
        let state;
        const listeners = new Set();

        const setState = (partial, replace) => {
            let nextState;
            if (typeof partial === 'function') {
            nextState = partial(state);
            } else {
            nextState = partial;
            }

            if (!Object.is(nextState, state)) {
            const previousState = state;
            state = (replace ?? (typeof nextState !== 'object' || nextState === null))
                ? nextState
                : { ...state, ...nextState };

            listeners.forEach((listener) => listener(state, previousState));
            }
        };

        const getState = () => state;

        const getInitialState = () => initialState;

        const subscribe = (listener) => {
            listeners.add(listener);
            // Unsubscribe function
            return () => listeners.delete(listener);
        };

        const api = { setState, getState, getInitialState, subscribe };
        const initialState = createState(setState, getState, api);
        state = initialState;
        return api;
        };