Creating a Selector

[untlsn]

I came up with two methods:
With root proxy preselector

const useProxySelector = <Proxy extends object, T>(proxy: Proxy, selector: (state: Proxy) => T) => (
  useSyncExternalStore(
    (syncSub) => subscribe(proxy, syncSub),
    () => selector(proxy),
  )
);
// Example
useProxySelector(store.ids, ids => ids.selected == id);

With derive from valtio/utils

type DeriveGet<T> = (get: <R extends object>(proxy: R) => R) => T

const useDerivedSelector = <Proxy extends object, T>(selector: DeriveGet<T>) => {
  const derived = useConst(() => derive({ selector }));

  return useSyncExternalStore(
    (syncSub) => subscribe(derived, syncSub),
    () => derived.selector,
  );
};
// Example
useDerivedSelector(get => get(store).ids.selected == id);

Both work and it has drastically reduced the amount of renderings. But what better way to create a selector? And is the derive really suitable as a fancy selector?

[dai-shi]

Yes, that approach works.
See also: https://github.com/pmndrs/valtio/wiki/How-to-avoid-rerenders-manually#subscribe-and-set-local-state-conditionally

const useSelector = (proxyObject, selector) => {
  const [slice, setSlice] = useState(() => selector(proxyObject))
  useEffect(() => subscribe(proxyObject, () => setSlice(selector(proxyObject))), [proxyObject])
  return slice
}

(☝️ It requires selector to be stable.)

If you use uSES, you need to use useCallback for stable subscribe function.

const useProxySelector = <Proxy extends object, T>(proxy: Proxy, selector: (state: Proxy) => T) => (
  useSyncExternalStore(
    useCallback((syncSub) => subscribe(proxy, syncSub), [proxy]),
    () => selector(proxy),
  )
);

I don't think the derive version is necessary nor performant.

[bernatfortet]

Hi @dai-shi, thanks for the amazing library/ies (sent a sponsor thank you).

I'm curious if the above method is the latest, and if so, I think it would make sense to add it to the wiki?

[dai-shi]

Slightly related, it's in docs:

valtio/docs/how-tos/how-to-avoid-rerenders-manually.mdx

Line 29 in 9593184

## Subscribe and set local state conditionally

But, maybe what you expect is different.
Feel free to send a PR to improve docs.