2

Use case:

I have a custom hook useFoo which needs to return values based on bar property in store but typescript throws error.

Code:

export const useFoo = observer(() => {
// typescript throws error --^^^^^^^--

  const { bar } = store;

  return bar ? 'x' : 'y';
});

Typescript Errors:

Argument of type '() => "x" | "y"' is not assignable to parameter of type 'IReactComponent<any>'.
  Type '() => "x" | "y"' is not assignable to type 'FunctionComponent<any>'.
    Type '"x" | "y"' is not assignable to type 'ReactElement<any, any> | null'.
      Type '"x"' is not assignable to type 'ReactElement<any, any> | null'.ts(2345)
Vinay Sharma
  • 3,291
  • 4
  • 30
  • 66

1 Answers1

0

Probably your concept is not full correct from architecture point of view, cause custom hook should be isolated from data to be reusable

https://github.com/mobxjs/mobx-react-lite/issues/67

useDisposable(
  () => mobx.reaction(() => loadingStatusStore.lastRefreshDate,
  refreshDate => {
    // here you can do rest of the `useEffect`, but you need to use that `refreshDate` here,
    // otherwise, MobX won't even bother running it since you are not really using an observed variable.
  }
)
Robert
  • 2,538
  • 1
  • 9
  • 17
  • 1
    Well, my use case is to have a custom hook to inject a store's properties in `n` number of components. Now, it's not really a good idea to wrap each component with an observer and import store in their file. Moreover, custom hooks are made for code reusability, moreover it is the actual requirement as I'm performing operation in the hook and don't want to repeat it each component. – Vinay Sharma Oct 11 '20 at 18:12