Cleanup of old routes

[skevy]

Awesome stuff @ericvicenti. Super excited to see where this goes.

What are your thoughts around cleaning up old routes? For instance...if you go through like, 10 nested routes...is there something we could include here that would unmount old components? If not unmounting...is there something we might be able to do in React Native land that is like "hey, this view isn't on the screen, can we cleanup after ourselves"? I'm not familiar off the top of my head how UINavigationController handles it behind the scenes...but I know it does something. Perhaps we could follow in it's footsteps, in some way.

[skevy]

Maybe I'm incorrect actually...perhaps UIViewController doesn't do any cleanup behind the scenes.

[ericvicenti]

This definitely sounds like something we want for low memory devices. I think we could add an ummount distance to NavigationStackView. So if you set it to 2, then it will unmount a scene once you move two routes away from it. IE, the NavigationStackView would unmount scene 0 once you navigate to scene 2, and mount it again when you move back to scene 1

[skevy]

Yah, that's actually a fantastic idea. Would be easy to implement and I like the fact that it would be configurable.

👍

[javache]

UIViewController used to remove UIViews that were not being used, but that was dropped in iOS6 since it didn't provide a lot of memory benefits.

For RN though, every view on screen will have it's (small) impact on reconciliation, so it might be beneficial to unmount some. Keep in mind that removing the React components will cause you to lose any local state in those components, so if a user was inputting text in view A and you push B and C causing A to be unmounted, that text will be lost.

[javache]

Alternatively, could we use shouldComponentUpdate to turn off reconciliation for invisible parts of the navigation stack?

[ide]

In our experience, de-prioritizing reconciliation of non-visible routes is more important than culling the native view hierarchy. I say de-prioritizing instead of completely turning it off because we want the views to update eventually, but in a way that doesn't degrade responsiveness.

As for memory usage, as long as each screen culls off-screen images (which I believe ScrollView already does), building up a stack of many screens hasn't been an issue. All iOS devices these days have at least 1GB of RAM and Android phones usually have 2 to 4 times that anyway.

So what would be nice is if Navigator provided programmers a way to run some code when a scene is N levels away from the top. That code might unmount components, but it could also do other things like stop subscribing to data stores or lowering the priority at which it handles updates from the store (ex: by deferring setState calls with InteractionManager).

[brentvatne]

Related: https://www.facebook.com/groups/react.native.community/permalink/710415322427382/

It would be great to have a removeClippedSubviews style optimization built in to unmount offscreen images.

[ide]

Might be time to build display:none or visibility:hidden so that we can script the culling logic from JS.