How to catch component unmount caused by live reload

Question

[edit - I thought I was using Hot Reloading, but I am actually using Live Reload]

I have a native plugin that needs to do some clean up each time it is finished with. Basically I want to prevent these errors:

Calling JS function after bridge has been destroyed: RCTDeviceEventEmitter.emit(..) 

componentWillUnmount() doesn't get called.

Answer 1

Live reloading will restart the app and load the app back to the initial route when a file changes. ComponentWillUnmount won't be called.

When you reload, what happens behind the scenes is that the react context is getting destroyed, and a new one is being created.

That error get's thrown whenever a Native Module is trying to do work, by using the old react context.

Answer 2

You could use something like this: Error Boundary in react

Just wrap the error prone code inside the ErrorBoundary component, e.g.

<ErrorBoundary><childComponentCausingError></ErrorBoundary> 

And in the ErrorBoundary component, you could just catch the error in componentDidCatch = (error, info) => {

}

componentDidCatch() is a lifecycle method in React.