How does the package optimize already mounted screens without losing any performance

[enestatli]

Hello, as explained in the example below rn-navigation components(screens) never unmounts when they are mounted once. I wonder on the background how rn-screen optimizes the memory usage, because all these components are mounted and local states or scroll positions are saved etc. What's more that states can be update through redux/context.

https://reactnavigation.org/docs/navigation-lifecycle/#example-scenario

How does rn-screens optimize so much load(when states are kept updating, many screens are mounted etc.) in the background?

Thank you.

[WoLewicki]

rn-screens detaches native views of screens that are not currently visible. If I understand correctly, your question is about the React state. rn-screens do not change anything about it so all of the changes there are still applied and there is no optimization of it. If you want to prevent the React state changes, you can use react-freeze. See https://github.com/software-mansion/react-native-screens#experimental-support-for-react-freeze on how to use it with react-native-screens. Does it answer you question?

[enestatli]

rn-screens detaches native views of screens that are not currently visible.

This is what I was looking for, thank you. Can you please give me more detail? What will happen when I route back to the mounted screen with goBack()? Does rn-screens attaches the screen back to the React tree?

[WoLewicki]

Yes, rn-screens detect the changes in React component tree, and, based on this, attach or detach native views. In native-stack, it is controlled fully on the native side, and in other navigators, we use activityState to attach/detach screens.