Why is this arrow function not firing, and how to properly call it?

Question

Why is someFunction not being fired in the following snippet? I get an error: someFunction is not a function.

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.setInterval = this.setInterval.bind(this);
    this.someFunction = this.someFunction.bind(this);
  }

  setInterval = () => {
    console.log('Set Interval');
    setTimeout(function () {
        this.someFunction()
    }, 2000);
  }

  someFunction = () => {
    console.log('Some function');
  }

  componentDidMount() {
    this.timer = this.setInterval();
  }
}

joy08 · Accepted Answer · 2020-07-31T08:41:18.633

3

Because the way you are referring "this" is incorrect. You might wanna go with these options:

Option 1: Explicit binding using bind()

setInterval = () => {
    setTimeout(this.someFunction.bind(this), 2000);
}

Option 2 : Use a fat arrow function

setInterval = () => {
    setTimeout(() => {
        this.someFunction()
    }, 2000);
  }

edited Jul 31 '20 at 08:41

answered Mar 31 '20 at 13:21

joy08

9,004
8
38
73

score 2 · Answer 2 · answered Mar 31 '20 at 13:07

That's technically a scoping issue. someFunction does not exist on that this what you have in the function passed to setTimeout.

Workaround which could work:

setInterval = () => {
    const self = this;

    setTimeout(function () {
        self.someFunction()
    }, 2000);
}

Or using () => { } like the following:

setInterval = () => {
    setTimeout(() => this.someFunction(), 2000);
}

I hope this helps!

score 1 · Answer 3 · answered Mar 31 '20 at 13:07

Try using an arrow function inside setInterval.

setInterval = () => {
    console.log('Set Interval');
    setTimeout(function () {
        this.someFunction()
    }, 2000);
  }

can be

setInterval = () => {
    console.log('Set Interval');
    setTimeout(() => {
        this.someFunction()
    }, 2000);
  }

The first snippet fails because the this doesn't refer to the correct this. There are a lot of questions and answers regarding this on StackOverflow, you can search for them for a more detailed explanation.

score 0 · Answer 4 · answered Mar 31 '20 at 13:33

The someFunction is out of scope. You don't need to bind 'this' if you are using arrow functions.

This is the simplest version of your component. Try this

class MyComponent extends React.Component {

  setInterval = () => {
    console.log('Set Interval');
    setTimeout(this.someFunction, 2000);
  }

  someFunction = () => {
    console.log('Some function');
  }

  componentDidMount() {
    this.timer = this.setInterval();
  }

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

Don't forget to clear the timer object inside componentWillUnmount.

Why is this arrow function not firing, and how to properly call it?

4 Answers4