Best practices on using a single Zustand store with large selectors?

[jeezrick]

Hi, I'm currently using a single Zustand store because I previously tried splitting state into multiple stores, but found it difficult to manage inter-store dependencies — especially when one store's state relies on another. This approach also aligns with Zustand’s official recommendation for single store.

However, I'm now facing performance and complexity issues due to nested and cross-dependent state. Here's an example selector I use to derive openedFileNodes:

const openedFileNodes = useGlobalStore(
  (state) => {
    const openedFiles = state.openedFiles;
    const novelData = state.novelData;
    return Object.entries(openedFiles).map(([groupId, fileGroup]) => {
      return {
        fileCards: fileGroup.fileCards.map((fileCard) => {
          let node: TreeNodeClient | null = null;
          for (const novelItem of Object.values(novelData)) {
            if (novelItem.novelData!.mapIdToNode[fileCard.nodeId]) {
              node = novelItem.novelData!.mapIdToNode[fileCard.nodeId];
            }
          }
          return {
            ...fileCard,
            node,
          };
        }),
        activeId: fileGroup.activeId,
        groupId,
      };
    });
  },
  (a, b) => {
    if (a.length !== b.length) return false;
    for (let i = 0; i < a.length; i++) {
      if (a[i].activeId !== b[i].activeId) return false;
      for (let j = 0; j < a[i].fileCards.length; j++) {
        if (a[i].fileCards[j].nodeId !== b[i].fileCards[j].nodeId) return false;
        if (a[i].fileCards[j].order !== b[i].fileCards[j].order) return false;
        if (a[i].fileCards[j].isPreview !== b[i].fileCards[j].isPreview) return false;
        if (a[i].fileCards[j].node?.text !== b[i].fileCards[j].node?.text) return false;
      }
    }
    return true;
  }
);

This selector is:

• Hard to read
• Expensive to run on every store update (since it traverses nested objects)
• Requires a deep custom equality function just to prevent unnecessary rerenders

My question:

Are there best practices for:

1. Structuring deeply nested global state in a single store
2. Optimizing heavy selectors like this (especially when parts of the derived data rarely change)
3. Avoiding expensive equality checks or unnecessary recomputation

Thanks in advance!

[mooalot]

I had the same problem when I started using one store instead of multiple. I recently made zustand-tracked to improve performance. It basically only recomputes the selector when it needs to. It sounds like you could use 'createTrackedWithEqualityFn' which also allows for result comparison to reduce rerenders.

[jeezrick]

Awesome! I will try it!