How to get memoized derivative array from an observable

[sebakerckhof]

Hi, I just started out with mobx in react, and so far it's a delight compared to the state management systems that try to avoid mutable state.

I have a bunch of observable objects that form a tree structure (constructed from classes with makeObservable).
Computed values that are members of the class work fine.
But now I want to derive a computed value, but not have it as a member of the class, since it's really just local state for the object (it builds an object that's used for an antd tree-select component).

So what's the best way to get this derived/computed value outside of the observable objects?

I found this works (rootNode being an observable object):

 const [{ selectOptions }] = useState(() =>
    observable({
      get selectOptions() {
        return buildSelectOptions(rootNode),
      },
    })
  );

However, I find this quite verbose, is there a way to avoid this inner getter and just do something like this:

 const [{ selectOptions }] = useState(() =>
    observable(() => buildSelectOptions(rootNode))
  );

Unfortunately this doesn't work...

I also tried:

const selectOptions = computed(() => buildSelectOptions(rootNode)).get();

But this gets re-run everytime the component re-renders, even if nothing relevant in the tree has changed.

Wrapping this in a useMemo also seems to do the trick:

 const selectOptions = useMemo(() => {
    return computed(() => buildSelectOptions(rootNode))
  }, [rootNode]).get()

But now this is quite verbose again.

Is there a better way? If not, which one of the mentioned solutions would be preferred?