Best practices on using selectors in v5

[nkleidis]

We just completed the migration to Zustand v5 and we would like to share this journey with you.
These are OUR findings and feedback is welcome. We are mostly interested in finding what are the best practices to follow.

---

Right after bumping the Zustand version to v5.0.1, our React-Native app wouldn't start because of this error:

We were expecting to hit this error as it was well documented in the migration guide

This error was being thrown from many places in our app so we started to fix them one by one.
It was a bit hard to do so because this is a runtime error, so we needed to go through as many scenarios as we could.

In order to fix the way we were using our selectors, we divided the selectors into 3 categories.

1. Simple selectors (no useShallow needed)

These are the selectors that return primitive values e.g. number, boolean, string
Also in this category are the simple selectors that don't manipulate the state
e.g.

const selectProp = (state: State) => state.prop;
const prop = useStore(selectProp);

2. Selectors that lightly transform the state (useShallow needed!)

These are the selectors that select something from the state and the output has a new reference each time it is called.
e.g.

const selectPetNames = (state: State) => state.pets.map(pet => pet.name); // new array is returned each time
const petNames = useStore(useShallow(selectPetNames));

3. Selectors with nested objects (useSwallow doesn't work here)

This was the most tricky category because the selectors in this category return an output that has a new reference each time it is called and also it contains nested objects/arrays that also have new reference each time they are called.
These selectors didn't work with useShallow!!
e.g.

const selectPetWithExtraInfo = (state: State) => 
	state.pets.map(pet => {
		let extraInfo = {};
		if (pet.type === "dog") {
			extraInfo = { canRun: true }
		}
		return { ...pet, extraInfo }; // extraInfo is nested and has a new reference each time
	});
const petWithExtraInfo  = useStore(useShallow(selectPetWithExtraInfo)); // !! Throws maximum depth error !!

In order to fix this we introduced a new hook called useDeep that works very similar to useShallow but it performs a deep equal check instead of a shallow check. So in these cases, only this worked:

import { useDeep } from "src/hooks/useDeep.ts"

const petWithExtraInfo  = useStore(useDeep(selectPetWithExtraInfo));

---

Code Sandbox Example

You can find an example of these selectors here

---

Feedback on the approach we followed above is more that welcome!

[dbritto-dev]

@nkleidis instead of stable selector we need to talk about stable selector results, you could have a stable selector that does not return stable results

// Case 1: stable selector result
const prop = useStore(state => state.prop);

// Case 2: stable selector result
const pets = useStore(state => state.pets); // We can use `useShallow` like this `useStore(useShallow(state => state.pets))`
const petNames = pets.map(pet => pet.name)
// Note: you can put this in a custom hook called `usePetNames`

// Case 3: stable selector result
const pets  = useStore(state => state.pets);  // We can use `useShallow` like this `useStore(useShallow(state => state.pets))`
const petsWithExtraInfo = pets.map(pet => { ... })
// Note: you can put this in a custom hook called `usePetsWithExtraInfo`

[nkleidis]

Thanks @dbritto-dev for your response!
As I understand, it is better to keep the selectors as simple as possible and perform any manipulation outside the selector (e.g. inside a hook). This will ensure that the selector output is stable.

One question on your answer above, I don't understand why we could use useShallow on the following statement. Isn't the output of state => state.pets always stable?

// We can use useShallow like this useStore(useShallow(state => state.pets))

[dbritto-dev]

Thanks @dbritto-dev for your response!

As I understand, it is better to keep the selectors as simple as possible and perform any manipulation outside the selector (e.g. inside a hook). This will ensure that the selector output is stable.

One question on your answer above, I don't understand why we could use useShallow on the following statement. Isn't the output of state => state.pets always stable?

// We can use useShallow like this useStore(useShallow(state => state.pets))

It is, we could use it but is not needed

[atraastrum]

@dbritto-dev
What about unstabel selector which produce stable result e.g.

// Assume pet object has only primitive fields
const pet = useStore(useShallow(s => s.pets.find(p => p.name === name)));

the selector depends on external name. Is this allowed?

[dai-shi]

It's allowed. By the way, in this specific case, useShallow shouldn't be required.