3.00 - Warning: Can't perform a React state update on an unmounted component.

[EmpireJones]

I'm a bit light on details, but I believe this relates to:

• The addition of hooks support in this library, in 3.00
• An error occurring / being handled after the component unmounts

ExceptionsManager.js:126 Warning: Can't perform a React state update 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 a useEffect cleanup function.
in AutoHeightImage (at autoHeightImageWithErrorFallback.js:13)
in ErrorableImage (at my_screen.js:12345)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at TouchableOpacity.js:308)
in TouchableOpacity (at listing.js:910)
in RCTView (at listing.js:908)
in RCTView (at listing.js:901)

Dependencies versions (please complete the following information):

• react: 16.12.0
• react-native: 0.61.5

Additional context

Works in 2.00, broken in 3.00

[vivaxy]

Hi @EmpireJones, thanks for your feedback. Please supply more information about min codes to reproduce.

[chrischeuk]

same issue here.

[boss225]

same issue here. How to fix, please ?

[eric-wood]

I run into this continuously in situations where AutoHeightImage is used in elements of a FlatList, and can be unmounted prior to the image rendering (especially when the user is scrolling quickly!).

The easiest fix would be to use a simple hook like this one and add a check around here to ensure the component hasn't been unmounted before attempting to call setHeight or onHeightChange.

I'm super slammed with work and won't have the bandwidth to provide a pull request, but I built a quick and dirty version of AutoHeightImage for my own purposes that features this. Hopefully it will help, @vivaxy! https://gist.github.com/eric-wood/6fdf0f3a09064f68712cba66ce0c948a

[vivaxy]

@eric-wood Thank you for your detailed feedback. Is it possible to provide a minimum codebase to reproduce the problem?

[eric-wood]

I played around with it for a few minutes by creating something that attempted to unmount a component that rendered an image before it resolved the dimensions, but I was unable to get something that reliably reproduces it, unfortunately. I can't tell if that's due to the caching AutoHeightImage is doing, or that react native does behind the scenes.

The problem is a lot more pronounced when scrolling through a long FlatList of elements. Another place I'd experience it was in conjunction with react-navigation when the user navigated between views before the images had a chance to resolve their dimensions. The warnings went away completely for both of those cases in my app when I swapped the library out for that minimal implementation in that gist; removing the isMounted check caused the problem to return!

Let me know if there's anything else I can do to help