Timers in React Native (this.setTimeout)

Settimeout and setInterval still work in react-native. BUT you have to use it in the right way:

Here is one of many ways to implement a timeout in React that I’m usually used:

export default class Loading extends Component {
  state = {
    timer: null,
    counter: 0
  };

  componentDidMount() {
    let timer = setInterval(this.tick, 1000);
    this.setState({timer});
  }

  componentWillUnmount() {
    clearInterval(this.state.timer);
  }

  tick =() => {
    this.setState({
      counter: this.state.counter + 1
    });
  }

  render() {
    return <div>Loading{"...".substr(0, this.state.counter % 3 + 1)}</div>
  }
}

With this approach you don’t have to worry about memory leak anymore. Just simple and straight forward.

There is an excellent article talking about this; you can refer to it here: https://medium.com/@machadogj/timers-in-react-with-redux-apps-9a5a722162e8

Leave a Comment