React-native-router-flux: Back action does not clear the states of the unmounted component

[deejaygeroso]

Version

react-native-router-flux v3.37.0,
react-native: v0.40.0

so I realized this code unmounts the current component then returns back to your last component:

Actions.pop({type: 'back'});

the problem is that the unmounted component doesn't loose its states when I route back to that component. I was hoping the states for that component resets because the component was unmounted. But it was exactly as i had left it. Any Idea on this guys?? thanks in advance

[joshg111]

I'm having the same problem. I think my issue is related to my state management Apollo Client (Redux). Perhaps Apollo Client does not auto cleanup state when a component which uses that state unmounts. I guess that's reasonable for Apollo Client. Then, when component which uses that state is mounted again Apollo Client connects all the old/cached state to that component.

I could manually clean up state when component is unmounted, or it turns out Apollo Client has some forceFetch=true option which will cause it to ignore any cached state, and will refetch the data when component mounts again.

What state management tool are you using? Or is it just component level state? If it's just component level state I feel like it should automatically get cleaned up when component unmounts.

Also, how sure are you that the component is getting unmounted? I was looking at the reducer for this routing library, and it seems that popping the component will result in "from" getting set with what I think is the "popped from" component. If that's true, then there is still a reference to the popped component in memory, so wouldn't that prevent the component from getting unmounted, or at least prevent it from getting cleaned up in memory? According to RN docs it seems that component is destroyed when it is unmounted.

[deejaygeroso]

@joshg111 the component does get unmounted. I just simple checked it by logging using componentWillUnmount. I kind of found out the problem but I still can't figure out how it was happening.

I'm using Feathers client (redux), the problem is with the redux state. Since I get data of my react component's state from A Redux state using componentWillMount, every changes from my react components state somehow gets reflected to my Redux state without triggering or dispatching actions from my reducers. I really don't know how it was happening. Somehow the memory location of that data from my react components state is pointing to my redux state.

So what I did is that everytime I load that component, I just simply fetch new fresh data from my server then store it to my redux state then load it to my component using componentWillMount so i could be sure that i have fresh data when i load the component.

Then another option is that everytime I unmount from that component i fetch another new data from the server to be stored on my redux state to clear any changes that happened during that time. Hope this helps.

[JosephKarayan]

I am using 'react-native-router-flux' to implement navigation between pages in my app.
There are some scenes (sort, filter) that I would like to remove from the back stack.

Is it possible to skip adding some pages to the stack or remove the page from back stack ?

[JosephKarayan]

The issue with removing a scene from the back stack was resolved by using 'popAndReplace' type in the the custom actions:
Actions.products({ ...this.props.product, type: 'popAndReplace' });