Best approach for selectors

[clenemt]

Imagine you have a store as such:

// store.js
const useStore = create(set => ({
  bears: [{ id: 1, attitude: 'angry'}, { id: 2, attitude: 'playful'}]
}))

and a component using that store:

// component.js
function AngryBear() {
  const bears = useStore(state => state.bears.filter(bear => bear.attitude === 'angry'))
  return <h1>{bears.length} angry bears around here</h1>
}

What would be the best way to memoize this selector to avoid unneeded work?

• Should I just put the filter inside the component after selecting the state.bears with a useMemo ?
• Should I put the selector in the store and access it through state.angryBears ?
• Other solution ?

Thanks :)

[dai-shi]

https://github.com/pmndrs/zustand#memoizing-selectors

Defining selectors outside component will be most preferable. In the future version (v4), this style will be more performant than inline selectors. If selectors depend on props, useCallback would be recommended. That said, it's rather unopinionated, so either way is fine.

(In this context, I assume the selector function is lightweight.)

[clenemt]

Now, this works, but useMemo() only memoizes it across renders, not across components. If you goal is to avoid re-renders, it's just fine. If you want to reduce computation, it will need some more technique.

Agreed 👍

One thing that bothers me a bit though is the boilerplate of always creating that selector function, then creating that wrapper with useMemo, then finally using it in the component.

This is now deviating from my original question, but what would be a good way to derived data and share it across component. Would you recommend using something like reselect, proxy-memoize or other tools with zustand?

Maybe it is just me, but i think it would be nice to have note in the readme about all this 👍

Thanks !

[dai-shi]

what would be a good way to derived data and share it across component.

reselect and proxy-memoize would work. But if I were to do it in a simple way with zustand, I'd de-normalize the store, putting the derived data in state, trying not to break it (there's a risk).
And, I'd actually use jotai for such use cases, with many/complicated derived data.

it would be nice to have note in the readme about all this

zustand is less opinionated about usage patterns. I'd like to have it in something like recipes instead of readme. For now, we can use a wiki page for such a recipe.

[dsacramone]

@clenemt What pattern did you end up with?

[maxwaiyaki]

This answer seems to have been removed in the docs. @dai-shi is this still the recommended approach?

[dai-shi]

Thanks for notifying. We removed the section, because v4 doesn't require it any more.

So, the recommended way is both patterns now:

// this is totally fine.
const Component = () => {
  const bears = useBearStore(state => state.bears);
  // ...
};

// this is also fine. (theoretically, this is a little better without relying on JS optimization. But, it's premature optimization and it would be unnecessary for 99.9% of cases.)
const selectBears = state => state.bears;
const Component = () => {
  const bears = useBearStore(selectBears);
  // ...
};

[dannobytes]

Did the documentation for #memoizing-selectors go missing or get deleted? It doesn't seem to exist anymore on the readme.
https://github.com/pmndrs/zustand#memoizing-selectors

[dai-shi]

This was the discussion when we were assuming of using useMutableSource in v4.
v4 actually uses useSyncExternalStore, which doesn't require memoizing selectors, and the section is removed entirely.
#387 (reply in thread)

[timeturnback]

@dai-shi show how exactly we should handle the case above ?

// JUST USE THIS
function AngryBear() {
  const bears = useStore(state => state.bears.filter(bear => bear.attitude === 'angry'))
  return <h1>{bears.length} angry bears around here</h1>
}

// SOLUTION 2 
const angrySelector = state => state.bears.filter(bear => bear.attitude === 'angry');
function AngryBear() {
  const bears = useStore(angrySelector)
  return <h1>{bears.length} angry bears around here</h1>
}

Or some way else

The problems is , for both solution . the .filter() will run every time the state change . may trigger heavy calculation . But if we use reselect . It will only trigger calculation when state.bears update .

// reselect
import { createSelector } from 'reselect';

export const angrySelector = createSelector(
  (state) => state.bears,
  (bears, bearsList) => {
    console.log('totalAngryBear calc'); //
    return state.bears.filter(bear => bear.attitude === 'angry');
  }
);

function AngryBear() {
  const bears = useStore(angrySelector)
  return <h1>{bears.length} angry bears around here</h1>
}

My question is . Is this the best practice to handle state-calculation case like this

[dai-shi]

That's a different question from the OP. (It's about whether memoization is necessary for avoiding extra re-renders.)

If you want to avoid extra calculation, memoization is necessary.
reselect is one and proxy-memoize is another.
zustand is unopinionated about choosing memoization libraries.