Nozbe / withObservables

HOC (Higher-Order Component) for connecting RxJS Observables to React Components
https://github.com/Nozbe/WatermelonDB
MIT License
68 stars 26 forks source link

Unsubscribe withObservables when component unmount #138

Open Coder231456 opened 1 year ago

Coder231456 commented 1 year ago

Is there any anyway to unsubscribe observable when component unmount.

i am getting below error, when component unmount

Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.

Error message:

TypeError: Cannot convert undefined or null to object
    in ChatComp (created by withObservables[item] { chatList })
    in withObservables[item] { chatList } (created by gestureHandlerRootHOC(withObservables[item]))
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by gestureHandlerRootHOC(withObservables[item]))
    in gestureHandlerRootHOC(withObservables[item]) (created by WrappedComponent)
    in WrappedComponent
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in Chat(RootComponent)

My code

 const getChatDispObserve = cid => {
    try {
        console.log('get data', cid);
        // const chatColl = database
        //   .get(CHAT_COLL)
        //   .query(Q.where('cid', cid), Q.experimentalSortBy('created_at', Q.desc));
        const chatColl = database
            .get(CHAT_COLL)
            .query(Q.where('cid', cid));
        const observable = chatColl.observeWithColumns(['sent_st']);

        return observable;
    } catch (e) {
        console.error('GetChatDispObserve', e);
    }
};

const enhance = withObservables(['item'], (props) => {
  const chatList = GetChatDispObserve(props.item.cid);
  return {
    chatList
  };
});
const EnChatComp = enhance(ChatComp);
radex commented 1 year ago

I think the issue is in the ChatComp component, not in the un subscription. Observables are unsubscribed on component unmount.