-1

I'm trying to learn React and I don't understand why this does not do anything when I try without an arrow function

componentDidMount() {
    var self = this
    this.timer = window.setInterval(function () {
        self.increment
    }, 1000)
}

Is the correct pattern self.increment()?

So why do I need the () when I don't need it in:

componentDidMount() {
    this.timer = window.setInterval(this.increment.bind(this),1000)
}
bob
  • 3
  • 3
  • You could say that the `function` inside setInterval "steals" the `this` context ;) – kelsny May 26 '22 at 17:09
  • Does this answer your question? [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) – kelsny May 26 '22 at 17:09
  • 2
    I would imagine you meant `self.increment()` ? – James May 26 '22 at 17:23
  • 1
    Not sure what you mean by "*when I try without an arrow function*", there's no arrow function in your code? – Bergi May 26 '22 at 17:28
  • @catgirlkelly That's incorrect, the `this` is correctly stored in a closure as `self`, when the function runs, `self` will point to the right object. – Ruan Mendes May 26 '22 at 18:27
  • Are you saying that if you change this to use an arrow function, it works? I doubt that It shouldn't matter at all because you are not using `this` from your `setInterval` callback. Prove me wrong with a [runnable example](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do). My guess? You removed `()` from `this.increment()` when you changed it from an arrow function to a regular function. – Ruan Mendes May 26 '22 at 18:28
  • @Bergi because I was simply doing : this.timer = setInterval(this.increment.bind(this), 1000) And I tried with a regular function – bob May 26 '22 at 18:50
  • @JuanMendes Are you saying that if you change this to use an arrow function, it works? Yes it works: this.timer = setInterval(this.increment.bind(this), 1000) Then the question might be: with the regular pattern why would I need the () when I don't need it with a fat arrow function? – bob May 26 '22 at 18:54
  • @bob `this.increment.bind(this)` is not an arrow function – Bergi May 26 '22 at 20:01
  • So when inserting my function directly I don't need to execute it: `window.setInterval(this.increment.bind(this),1000)` But when I insert it inside another function I need to execute it: `window.setInterval(() => this.increment.bind(this)(), 1000)` – bob May 26 '22 at 23:00
  • Uh, in both cases you are passing a function to `setInterval` that will execute the `increment` method. If you're passing a function that will *not* execute the method it won't work of course. – Bergi May 26 '22 at 23:04

1 Answers1

0

You are not invoking self.increment, you are properly scoping this for your code to work. Maybe it appears it's not working because your interval's callback does not do anything :)

Also, here's a simpler version of your code, you could omit the .bind if your function does not need to access your component's scope, but typically in react you'd want access to that:

this.timer = setInterval(this.increment.bind(this), 1000)
Noah
  • 17
  • 1
  • 8