Memoized values - am I doing this correctly?

I’m trying to create an optimised selector. The selector is shared amongst several components so it accepts a parameter from outside:

const defaultValue = {};

const useSingleValue = id => useStore(
  useCallback(state => state[id] || defaultValue, [id])
);

Is this the correct way to go about it?

[dai-shi]

Long story short, we discussed and changed our recommendation. The main reason is we plan to use useMutableSource in v4, and it recommends stable selectors for optimization. So, we recommend it in v3 too, to prepare for v4.

v3 (as well as v2) optimizes with stable selectors too to some extent. It’s trivial if the selectors are lightweight. Unnecessary computation is just about calling the selectors. If a selector is not referentially changed and the state is not changed, we skip calling the selector. It has nothing to do with re-renders. If a selector is very lightweight (ex. state => state.foo) skipping it is almost nothing. btw, useCallback is not zero cost, so in total we don’t know which is better. The best is define the selector outside render, so we don’t even need useCallback (if the selector doesn’t depend on other values.)

[alexanderchan]

@dai-shi thanks that’s a good idea, I might give the hook version a try next time – we could always use something like a lodash or other just safe get to support a string version of the nested prop pretty easily so that should cover a lot of the cases.

Thanks the pointer to react-tracked I’ll check it out. It’s hard to keep “track” of all of the nice state libraries you’ve got on the go! Also thanks for sharing things like zustand and jotai as well 👍