MobX React: Define a observer hook

Question

I'm trying to define my own hooks in a MobX project which depend on mobx observables. But it's not possible to wrap a hook with observer() because observer() must return a component. Is there a way to define observer hooks?

Example:

// not working because observer must return a component
const useFindSuggestion = observer(({ target, node, suggestionsStore }: LinkSuggestionWrapperProps) => {
  const [suggestions, setSuggestions] = useState<IDocumentInfo[]>([]);

  useEffect(() => {
    const suggestions = suggestionsStore.getRelevantSuggestions(node, target).filter((s) => s.documentId !== node.target);
    setSuggestions(suggestions);
  }, []);

  return { suggestions };
});

Answer 1

Solution: use autorun within hook https://mobx.js.org/react-integration.html#useeffect

Example: https://codesandbox.io/s/minimal-mobx-react-project-forked-8gnxgt?file=/index.js