How to replace useObserver in store hooks?

[Max-Zviagintsev]

We use hooks to get different parts of the store into components, according to previous documentantion:

export const useContactsStore = (): AddressBookStoreHook => {
  const { addressBook } = useStore();
  const { contacts } = addressBook;
  const { data, pagination, columns, inlineEditing } = contacts;

  return useObserver(() => ({
    contacts,
    contactsData: data,
    pagination,
    contactsColumns: columns,
    inlineEditing,
  }));
};

Since useObserver is deprecated, I've tried to replace it with or observer(), but always got TS errors. Can you please share the proper solution?
Thanks!

[danielkcz]

If don't tell us what errors you have, we can't really help you :)

Either way, just drop useObserver and stick observer on the consuming component. It can "see" inside the hook call and access to observables.

[Max-Zviagintsev]

export const useFiltersStore = observer(
  (): FiltersStoreHook => {
    const { filters } = useStore();
    const {
      contactsFilters,
      listsFilters,
      stopListFilters,
      detailedSmsFilters,
      detailedViberFilters,
      detailedHlrFilters,
      campaignsSmsFilters,
      campaignsViberFilters,
      campaignsHlrFilters,
      shortUrlFilters,
      shortUrlClicksFilters,
    } = filters;

    return {
      contacts: contactsFilters,
      lists: listsFilters,
      stopList: stopListFilters,
      detailedSMS: detailedSmsFilters,
      detailedViber: detailedViberFilters,
      detailedHLR: detailedHlrFilters,
      campaignsSMS: campaignsSmsFilters,
      campaignsViber: campaignsViberFilters,
      campaignsHLR: campaignsHlrFilters,
      shortURL: shortUrlFilters,
      shortUrlClicks: shortUrlClicksFilters,
    };
  }
);

TS2769: No overload matches this call.   Overload 1 of 3, '(baseComponent: FunctionComponent<object>, options?: IObserverOptions | undefined): FunctionComponent<object>', gave the following error.     Argument of type '() => FiltersStoreHook' is not assignable to parameter of type 'FunctionComponent<object>'.       Type 'FiltersStoreHook' is missing the following properties from type 'ReactElement<any, any>': type, props, key   Overload 2 of 3, '(baseComponent: FunctionComponent<any> | RefForwardingComponent<any, {}>, options?: IObserverOptions | undefined): (FunctionComponent<...> & { ...; }) | (RefForwardingComponent<...> & { ...; })', gave the following error.     Argument of type '() => FiltersStoreHook' is not assignable to parameter of type 'FunctionComponent<any> | RefForwardingComponent<any, {}>'.       Type '() => FiltersStoreHook' is not assignable to type 'FunctionComponent<any>'.         Type 'FiltersStoreHook' is not assignable to type 'ReactElement<any, any>'

[urugator]

He didn't say replace useObserver with observer, but:
just drop useObserver and stick observer on the consuming component

[Max-Zviagintsev]

No matter if I completely remove type for this hook, it always shows errors. Looks like and observer() should be used with React components, but my hook returns an object.
So I can remove useObserver from the hook and it keeps reactivity if the destination component is wrapped by the observer?

[urugator]

yes, "destination component" being a component where the hook is used

[Max-Zviagintsev]

Thanks, works fine!