Components only unsubscribe on update or unmount if they have custom update and unmount implementations.

[quisido]

The unsubscribe listener on update and unmount only binds to existing implementations. It does not fire if no implementation exists to which it can bind.

[umbertoghio]

Hello,
I just run some tests on 2.0.3 but unfortunately the error persists, I tried to dig a bit deeper and I have more details:

Here the exact steps I take to reproduce:

• From Notifications page I touch an element, it will set notificationBadge in the global, then load the OffersDetail page
• OffersDetail page loads up just fine, page is mounted, also BottomBar is mounted
• BottomBar reads from this.global, so it subscribes to notificationBadge
• I go back to notifications, OffersDetail page is Unmounted, BottomBar is unmounted **but subscription remains? **
• I touch again the same notification, setGlobal fires, React calls a forceUpdate on BottomBar of the OfferDetails page, which is not mounted then the error

My theory is that due to stack navigation I have several Pages mounted at the same time, each page have his own BottomBar subscribed, so at any moment there are two / three BottomBar mounted, but in this specific instance NOT the one in OfferDetails

Questions that to my limited knowledge I can't answer, but maybe helpful:
How can reactn know which components to call a forceupdate ?
Do the subscription considers the specific component with a unique key or id or just all the BottomBars ?

What is causing the unmount of offers details ?
I have a AppNavigation that has:
AppContainer -> switchNavigator -> DrawerNavigator -> StackNavigator -> (Notifications, offersDetails)
Switching from Notifications to OffersDetails will mount the offersDetails, going back to Notifications will unmount it

[umbertoghio]

I tried to setup a reproduction environment, I setup the navigation in the same way as my project but so far no luck...the main problem is that when going from Page A to Page B, then back to A, page B is kept mounted (in my project Page B unmounts)...can't figure out how to trigger a page B unmount.

I hope it can help....

https://github.com/umbertoghio/rn-test

[quisido]

Thank you for the repo. I've cloned and ran it.

Does your rn-test repo cause the warning? I am unable to reproduce it, but I may not be looking in the right place. There are no warnings or errors displaying in my CLI or Expo Developer Tools screen.

Page B is mounting and unmounting fine and as expected. I've submitted a PR to your test repo with what I am running locally.

• Can you try removing your node_modules directory and re-installing them?
• If I am not looking in the right place to see the error message, can you direct me to where to find it?

[umbertoghio]

Ho Charles,
Sorry, I could have described the issue
better.
The repo provided is as close as possible to my work repo, but I can’t reproduce the
problem.

There’s one key difference I can’t explain:
In this test repo pages remain mounted after navigation, while on my work repo page is unmounted (therefore the error).
I’ll try to investigate more

[quisido]

For me, the pages are unmounting correctly on navigation.

Your console.log('PageName is unmounting') was inside the componentWillMount method, as opposed to the componentWillUnmount method. This may be why you believed navigating did not result in an unmount. You were not logging anything on unmount.

I gave those methods the correct names in my PR.

Your work repo is on reactn@2.0.3 and still has the "cannot re-render an unmounted Component" warning?

[umbertoghio]

Wops too much copy pasting....
yes, no errors, I’ll fix it and give my feedback

[umbertoghio]

Ok, tested your changes, thank you for the correction, I confirm it formally behaves like my main project (mount / unmount), but I get no errors or warnings, even on version 2.0.0.

Just to test I tried to add a componentwillunmount to my main project bar but still get the error.

I'll try a different approach: I'll start to prune and chop down my main project until I figure out the culprit, but I need a bit of time.

Thank you very much with all the efforts and assistance!

[quisido]

No, no, thank you very much for assisting in the reproduction.

Let me know when your repository reproduces the error, and I'll start working on a fix immediately. :)

[umbertoghio]

Eureka, I made it :-)

I started from the main project and started to chop down everything that was not essential in reproducing the problem, ended up with a very simple reproduction scenario that triggers the problem!

Note that I have the issue on many pages / components but I hope this use case will allow you to track down the issue :-)

Repo is still the same
https://github.com/umbertoghio/rn-test

Thanks a lot!

PS : in case I want to offer you a beer where I can PayPal?

[umbertoghio]

Hi Charles,
Just an update, we have a companion React (last version) web project to the app and noticed that when upgrading to reactn 2.x the error is triggered also there, so it is not just something from react native.
Do you need a reproduction scenario for the web too?
Can you reopen this issue in the mean time?
Thanks!

_{Sent with GitHawk}