React 18 use mobx without observer

[ikabetskyi-trimac]

In React 18 we have useSyncExternalStore hook and we can work with our global store without observer.

const selector = () => mobxStore.data;

const data= useSyncExternalStore(autorun, selector);

[penx]

If this works with no caveats, it seems it would be useful to document and export a helper such as

export const useSelector = <T>(selector: () => T): T => {
 return useSyncExternalStore(autorun, selector);
}

(related)

[urugator]

Please check the discussion under
#2566 (comment) (uncollapse the replies)

[penx]

ok I think that makes sense, thanks for pointing me to it :)

My understanding is:

• it's safe as long as you're returning primitives and not observables
• you don't want this as an export from mobx-react, due to the maintenance burden

with that in mind, I think this should be safe to use

export const useSelector = <T>(selector: () => T): T => {
  const checkSelector = useCallback(() => {
    const value = selector();
    if (isObservable(value)) {
      throw new Error("useSelector cannot be used on an observable");
    }
    return value;
  }, [selector]);
  return useSyncExternalStore(autorun, checkSelector);
};