Why this.tick() is returned. React Tutorial

Question

I'm relatively new to web development and am currently studying Reactjs.

My question is regarding this code. This is found on the React.js website, here specifically: State and Lifecycle - React

    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

I'm wondering why this.tick() has to be returned. instead of just setInterval(this.tick(), 1000). I tried this, and of course didn't work.

setInterval wants a function as the first parameter. If you add this.tick() as a parameter, then you runs the tick function right away because the parentheses . So your first parameter will be whatever your tick method return, most probably void. — Peter Ambruzs, Oct 10 '19 at 10:21

score 0 · Answer 1 · answered Oct 10 '19 at 10:32

Ok, so as per MDN web docs, the first argument is supposed to be a function. That answers my question.

So, that was why, when I tried to write:

componentDidMount() {
    this.timerID = setInterval(this.tick, 1000);
  }

it didn't work...

But when I bind it like so,

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.tick = this.tick.bind(this);

it worked.

1 Answers1