Agfdhyk

I'm using react-native, when I try to navigate to another page using StackNavigator the previous page is running on the background

This is App.js

import Login from './app/component/Login';

import Menu from './app/component/Menu';

import Guide from './app/component/additions/Guide';

import { StackNavigator } from 'react-navigation';



const Navigator = StackNavigator({

  login: {screen: Login},

  main: {screen: Menu},

  guide: {screen: Guide},

},{ headerMode: 'none' });

And I have a Guid.js like this

componentDidMount() {

  setInterval(() => {

    console.log('I do not leak');

  }, 1000);

}



render() {

  const {navigate} = this.props.navigation;

  return(

    <TouchableOpacity onPress={() => navigate('main')}>

      <Text> navigate to main </Text>

    </TouchableOpacity>

  )

}

The problem is, even I navigate to the main page, I still getting the interval that I log inside the componentDidMount of my Guide.js, and even going back on that page, it runs the componentDidMount and run again my log, that means the interval is running again, what I want to do is after or while navigating to another page, I want to destroy the Guide.js, the page where I came from, and I have a page where I run WebView I wan't to do the same thing for that page, how can I do that?

Once timers are set, they runs asynchronously, you have to remove the timer if it's no longer needed when you leave the screen, like so:

constructor(props) {

    this.timerID = null;

}



componentDidMount() {

    this.timerID = setInterval(() => {

        console.log('I do not leak');

    }, 1000);

}



/**

 * Frees up timer if it is set.

 */

componentWillUnmount() {

    if (this.timerID != null) {

        clearInterval(this.timerID);

    }

}

You can load components only when they are needed by using the new React-native Lazy API, here is some documentation on how to use: https://reactjs.org/docs/code-splitting.html