Which is the recommended way? ‘shallow’ or ‘useShallow'

[Chuck-Ray]

Hello.

When I was checking the community comments, I saw that the recommended writing style was the following:

createWithEqualityFn((state)=>{}, shallow);

However, I am mentioned on the home page and in the documentation, is the following way:

useStore(useShallow((state) => [state.X1,state.X2]));

Which one should I use? Or are the two usages serving different purposes?

[dai-shi]

Both are introduced in v4 and will stay in v5.
useShallow is newer and is basically recommended.
Basically we want to collect more feedback on them.

[oosawy]

I can't make sense of useShallow, although useStore accepts the equality function.

That useShallow usage seems confusing to use a hook in hook arguments, and passing shallow as equalityFn should be straightforward.

Why useShallow is recomended? What is the difference?

[dai-shi]

#1937 this long thread might help.

In short, some people feel it better. If you want to stick with shallow, you can use createWithEqualityFn.
Note that useFoo(useBar(...)) is totally valid usage.

[alpor]

useShallow is newer and is basically recommended

Newer does not means better. Moreover, many todays "newer" things are actually worse than older.
Why it is recommended? You actually sacrifice encapsulation and code reuse. For what?

this long thread might help

No, it is not.

[dai-shi]

Why it is recommended?

If both useShallow and shallow work for your case, useShallow is recommended because it reduces the bundle size. Yes, as it's new we may have unknown issues, that's why it's "basically".

[hamitkera]

I created useShallowStore hook to pick any state with just array and TS support. Do you think it's good practise? @dai-shi

[dai-shi]

I'm not sure if it's good or recommended, but it's valid.

If I were to do it, I'd simply do this:

const Input = () => {
  const unknown = useStore((state) => state.unknown)
  const name = useStore((state) => state.name)

[hamitkera]

Sometimes states is growing and I don't want to pick every state line by line so I thought it would be good to have such a hook to pick all at once.

[dbritto-dev]

const [unknown, name] = useStoreWithEqualityFn((state) => [state.unknown, state.name], shallow)

[hamitkera]

I know this one but just wanted to make it look clean with a hook. Also the purpose of putting unknow there to show that typescript complains if the key is not part of state.

[oleksandr-danylchenko]

Do I understand correctly that for the vanilla stores made with the createStore, using the useStore with the useShallow is an expected pattern?

export function useAnnotatorStore<T>(selector: (state: AnnotatorSlices) => T): T {
	const store = useContext(AnnotatorStoreContext);
	if (!store) {
		throw new Error('Missing `AnnotatorStoreContext.Provider` in the tree');
	}
	return useStore(store, selector);
}

const { isNarrow } = useAnnotatorStore(useShallow((state) => ({ isNarrow: state.isNarrow })));

[oleksandr-danylchenko]

I saw in the docs¹ that the useStore hook can be bound to a certain store type using the overrides:

function useBearStore(): BearState
function useBearStore<T>(selector: (state: BearState) => T): T
function useBearStore<T>(selector?: (state: BearState) => T) {
  return useStore(bearStore, selector!)
}

So it would be nice to use such a pattern for the vanilla store distributed through the React Context.

Footnotes

1. https://zustand.docs.pmnd.rs/guides/advanced-typescript#bounded-usestore-hook-for-vanilla-stores ↩

[dbritto-dev]

@oleksandr-danylchenko useShallow is not required but recommended when you want to return and object or array but not needed when you return primitive values

[oleksandr-danylchenko]

Thanks, sure ✅

I was interested specifically in the objects/arrays creation within the selector.

I also use them quite frequently as a single "groped" selector per component:

const { isNoteEditMode, onNoteCancel, draftHtml } = useAnnotatorStore(
	useShallow((state) => ({
		isNoteEditMode: state.noteMode === NoteMode.EDIT,
		onNoteCancel: state.onNoteCancel,
		draftHtml: state.draftHtml
	}))
);