Selectors vs destructuring

[MichielDeMey]

Hi

When browsing the documentation I see a lot of references to selectors and third-party plugins to automatically generate them.

From what I've gathered from the documentation, selectors are "recommended to use when using either the properties or actions from the store".

My question is, what's the difference between using the selectors vs. simply destructuring from the store?

Destructuring:

const { count } = useStore()

Selectors:

const count = useStore(state => state.count)

Given that the ecosystem has written selector generators, I must be missing something obvious?
Maybe the documentation can be improved to help future adopters with best practices?

[dai-shi]

Hi, it's very different if you have isolated anotherCount property in your store.

This 👇 will trigger re-render if anotherCount changes.

const { count } = useStore()

This 👇 will not trigger re-render if anotherCount changes.

const count = useStore(state => state.count)

Maybe the documentation can be improved to help future adopters with best practices?

https://github.com/pmndrs/zustand#fetching-everything says "bear in mind that it will cause the component to update on every state change!"
Any suggestion to add a note there?

[MichielDeMey]

Thanks, it's really clear now!

We could expand the "Fetching everything" section to include the example that you mentioned here, as well as expand the wiki page to explain why selectors are preferred (https://github.com/pmndrs/zustand/wiki/Auto-Generating-Selectors).

[dai-shi]

You are welcome.

I feel like leaving readme as is. It would be nice to create a new doc (or a wiki page) to describe why we should prefer using selectors.

[imtrent]

@dai-shi Would something like this trigger a re-render if anotherCount changes?

const { count, setCount } = useStore(state => ({count: state.count, setCount: state.setCount}))

[dai-shi]

Yes.

Either

const count = useStore(state => state.count)
const setCount = useStore(state => state.setCount)

or

const count = useStore(state => state.count)
const { setCount } = useStore.getState() // no reactivity

would work. (Or use useShallow)

[dai-shi]

btw, you might be interested in trying valtio. https://github.com/pmndrs/valtio.
It optimizes re-render with "destructuring" style. No selectors needed.