Is there a recommended way of using MobX with custom React hook?

[kykungz]

Wrapping React components with observer seems to be required when interacting with observable values from MobX store.

However, when I have most of my logic/utility written in a custom hook which requires some values from the store, the component that calls the hook must also be wrapped with observer. This is not very friendly, as there's no way to tell which of my custom hooks require the caller to be wrapped with observer.

Is there a recommended guideline on this?

[mweststrate]

In that case the simplest approach is to sync the observables to state, e.g.

function useMyHook(store) {
  const [val, setVal] = useState(() => store.observable)
  useEffect(() => reaction(() => store.observable, v => setVal(v)), [])
  // something with val
}

As you can see that can easily be turned into it's own generic utility hook as well.

[pumuckelo]

but doesn't whoever calls useMyHook still need to be wrapped in an observer?

[Andre-3rd-Viking]

Another more natural way is to let the component observe and pass observed value(s) as param(s) to the custom hook so:

• when the observer component gets re-rendered due to store changes, the hook gets re-executed with the new value(s)
• hook parameter(s) is a simple way to express the hook's dependencies to the consumers (self documented way to tell consumers what needs to be provided and observed before passing them to the hook)

export const MySuperComponent: React.FunctionComponent = observer(() => {
  const { myObservedValue } = myStore
  const result = useMyHook(myObservedValue)

  return <>Whatever the view is<>
}

export const useMyHook(myObservedValue) {
   // ...
}

[codeBelt]

I think this works.... so far so good.

example

const count = useMobxSelector(() => myMobxStore.count);

// useMobxSelector.ts

import {comparer, type IReactionOptions, reaction, toJS} from 'mobx';
import {useEffect, useState} from 'react';

export function useMobxSelector<T>(
  selector: () => T,
  options?: IReactionOptions<T, false>,
): T {
  const [value, setValue] = useState(() => toJS(selector()));

  // biome-ignore lint/correctness/useExhaustiveDependencies: selector/options close over stable store refs; re-subscribing on every render would be wrong
  useEffect(() => {
    const dispose = reaction(
      () => toJS(selector()),
      (plainValue) => setValue(plainValue as T),
      {
        fireImmediately: true,
        equals: comparer.structural,
        ...options,
      },
    );
    return dispose;
  }, []);

  return value;
}

https://gist.github.com/codeBelt/8601de78348522ae7429958dc5d26b40