Warning on component unmount

[aks1994]

Hi, thanks for this library.

This component is working well for me but the only strange thing is that it gives me this warning every time the component unmounts. Is there something that I have to unsubscribe to in componentWillUnmount?

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.
in SvgImage (at index.js:18)
in MyImage (at index.js:71)
in RCTView (at View.js:60)
in View (at index.js:70)
in RCTView (at View.js:60)
in View (at index.js:69)
in RCTScrollContentView (at ScrollView.js:791)
in RCTScrollView (at ScrollView.js:887)
in ScrollView (at index.js:68)
in Login (created by Connect(Login))
in Connect(Login) (at SceneView.js:10)

[appdemox]

try doing this -> got to svgImage.js inside the library folder and do the following changes

• go to componentWillReceiveProps and add this.setState({ isMounted: false, fetchingUrl: null });
  to the end of the function ..

it worked for me

[appdemox]

hey also add this to the start of the component ->
constructor(props) {
super(props);
this.state = { fetchingUrl: null, svgContent: null, isMounted: true };
}

[MarkDaleman]

@appdemox sadly that didn't fix it for me, still getting the error (the same one described above)

[ac1dr3d]

so im not the only one...
same problem...
dont want to re-write library... any solutions so far?

[aks1994]

thanks but that did not fix it for me..

[seekshiva]

Hi,

When this component mounts, it tries to fetch the svg file data and sets it to state. It is a one time operation. RN is warning about a potential memory leak in a case where a component maybe subscribed to an event listener, and continues to call setState when the event triggers (even though the component has unmounted). So calling setState after component has unmounted could be a sign that you have an event listener that has not been purged yet, and such event listener could cause memory leak. There is no memory leak in this case since the image is only attempted to be fetched once, and setState is called definitely just once. I could add a fix to not call setState if component has already been unmounted, but that is not the issue here.

It seems like there is an underlying issue with component in the root level.

I'll give you an example: If you have a loading spinner that uses this component, and this component fetches data from uri provided, and before the svg can be loaded, the actual data has been fetched so there is no need to show the spinner anymore.

In this case, you would probably be better off using an icon font or a svg from within project instead of loading it from remote uri (since there is no point making the user to wait for some time just to see a loading spinner).

---

The other case is that you actually have a view that needs to render an image, but the parent keeps modifying the key so the Image component keeps getting recreated multiple times. This could be a big perf issue in your app.

So I suggest you to put a console.log in the constructor of a parent component or in the SvgImage component itself, and see if constructor keeps getting called multiple times for a single image. If that is the case, you need to debug why the node kept getting recreated and fix the issue in your code.

Post your findings here after checking.

Cheers!