Stop a reactive subscription while component is removed from the DOM

[erixtekila]

Hi,

For now, we can get the query in the wrapped component, but we can't access is subscription handle, since it's done in the withQuery HOC. When the component is unmounted, react compains :

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Wouldn't it be handy to get the subscription handle too, to stop it in its componentWillUnmount method ?

Any other prefered way ?

Thanks

[Isarstyle]

+1

[erixtekila]

I was plain wrong. The subscription handle is accessible in the query like so :

const C = ( { data, query } ) =>
{
    useEffect(() => {
      // returned function will be called on component unmount 
      return _ => query.subscriptionHandle.stop()
    }, [])

      return(
            <>{ ...data }</>
      )
}