Question: Performance Optimization in Zustand

[dev2xl]

Question: Performance Optimization in Zustand

Hello! 👋

I'm using Zustand and trying to maximize performance. I’m unsure which approach is better when selecting slices of the store. Specifically, should I return slices independently, or use useShallow to return them together?

Option 1: Selecting Independently

const nuts = useBearStore((state) => state.nuts);
const honey = useBearStore((state) => state.honey);

Option 2: Using useShallow to Combine

const { nuts, honey } = useBearStore(
  useShallow((state) => ({ nuts: state.nuts, honey: state.honey }))
);

Context

nuts: An array of objects.
honey: A boolean.

Which option is more performant and why? Are there scenarios where one approach is clearly better than the other? Any insights would be appreciated!

Extra: Does this compare to the performance of selection only one slice?

Thanks in advance! 🙏

[dbritto-dev]

@dev2xl option 1 > option 2, option 1 you don't need to import anything and does not need to use a shallow comparison

Note

that's true only for primitive data types for complex data types you might need useShallow, let's say you are comparing Maps or Sets then you need to use useShallow

[dai-shi]

note that option 1 requires two subscriptions.
it depends on the requirement, but in terms of render optimization, it's the same. for subtle performance difference, it's unknown unless you measure it.

you don't need to import anything

I think that is important as shallow is a big function.

[dbritto-dev]

@dai-shi I'll say that option 1 could be a little bit faster due to is only running one comparison instead of two (one from shallow and one from useSyncExternalStore) but correct me if I'm wrong

[dai-shi]

I don't know which is faster, tbh.
With option 1, two listeners are called,

zustand/src/vanilla.ts

Line 79 in ef0c619

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

and two Object.is-like comparisons in useSyncExternalStore.