updating state every x seconds

Question

I am trying to update a state every 3 seconds.

export default class Calendar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      timeLineTop: 75,
    };
  }

render() {
    this.state.timeLineTop = setInterval(function () {
      let d = new Date();
      let result = d.getHours() + d.getMinutes() / MINUTES_IN_HOUR;

      return result;
    }, 3000);

    <View style={[
          { top: this.state.timeLineTop },
        ]}></View>
  }
}

Why will this not update my views position every 3 seconds?

Answer 1

This code work in React Native 0.47.1

import TimerMixin from 'react-timer-mixin';

mixins: [TimerMixin];

export class MyClass extends Component {

    componentDidMount() {

        this.interval = setInterval(() => {
            console.log("Hi");

        }, 6000); //6 seconds

    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }
}

Answer 2

ES6 solution which worked for me, I found it here https://github.com/reactjs/react-timer-mixin/issues/4

componentDidMount() {
 this.timer = setTimeout(() => {
  console.log('I do not leak!');
 }, 5000);
}

componentWillUnmount() {
 clearTimeout(this.timer);
}

Answer 3

** Updated to implement TimerMixin

You need to call a this.setState to update a state variable, and as specified by @eyal83, use the TimerMixin for setTimeout & setInterval:

var TimerMixin = require('react-timer-mixin');

componentDidMount: function() {
  this.setInterval( () => { 
       let d = new Date();
       let result = d.getHours() + d.getMinutes() / MINUTES_IN_HOUR;
       this.setState({
           timeLineTop: result
       })
    }, 500);
}

I've also set up a basic app resetting the state variable with a setInterval here, code is below. https://rnplay.org/apps/9gD-Nw

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var TimerMixin = require('react-timer-mixin');

var SampleApp = React.createClass({
  mixins: [TimerMixin],
  getInitialState: function() {
        return {
            timeLineTop: 75
        }
    },

  componentDidMount: function() {
    this.setInterval( () => { 
      this.setState({
        timeLineTop: this.state.timeLineTop+1
      })
    }, 500);
  },

  render: function() {

    return (
      <View style={styles.container}>
       <View style={[
          { marginTop: this.state.timeLineTop },
        ]}><Text>TOP - {this.state.timeLineTop}</Text></View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:60,
  },
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

Answer 4

Using setTimeout and setInterval globally is a very bad idea.

We strongly discourage using the global setTimeout(...) and recommend instead that you use this.setTimeout(...) provided by react-timer-mixin. This will eliminate a lot of hard work tracking down bugs, such as crashes caused by timeouts firing after a component has been unmounted.

More info here: https://facebook.github.io/react-native/docs/timers.html#timermixin

Include the timer mixin like this:

var TimerMixin = require('react-timer-mixin');

var Component = React.createClass({
  mixins: [TimerMixin],
  componentDidMount: function() {
    this.setInterval(
      () => { console.log('I do not leak!'); },
      500
    );
  }
});

Answer 5

In ES6, you should use react-mixin, (https://github.com/brigand/react-mixin), example:

var reactMixin = require('react-mixin');
var someMixin = require('some-mixin');
class Foo extends React.Component {
    render: function(){ return <div /> }    
}
reactMixin(Foo.prototype, someMixin);
reactMixin(Foo.prototype, someOtherMixin);

Answer 6

This is my code using component..

    import TimerMixin from 'react-timer-mixin';


    export default class MyComponent extends Component {

        componentDidMount(){
            TimerMixin.setTimeout.call(this, () =>{ 
                this.getData()
            },2000);
        }

        getData(){
            //call API HERE

        }

    }