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.

[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.