I'm using Babel with Stage 2 preset and have a React ponent class like this:

class Test extends Component {
  someValue = 'Hello';

  ponentDidMount() {
    this.debouncedHandleResize = debounce(this.handleResize, 1000);
    window.addEventListener('resize', this.debouncedHandleResize);
  }

  handleResize = () => {
    console.log(this.someValue);
  }
}

This works as expected. 1000ms after a window resize the handleResize method fires and console logs 'Hello'.

Why can I not do the follow though?

class Test extends Component {
  someValue = 'Hello';

  debouncedHandleResize = debounce(this.handleResize, 1000);

  ponentDidMount() {
    window.addEventListener('resize', this.debouncedHandleResize);
  }

  handleResize = () => {
    console.log(this.someValue);
  }
}

In this scenario I get an error:

TypeError: Expected a function

I must be missing something, but I thought both were basically ways of assigning a property value to the class.

I'm using Babel with Stage 2 preset and have a React ponent class like this:

class Test extends Component {
  someValue = 'Hello';

  ponentDidMount() {
    this.debouncedHandleResize = debounce(this.handleResize, 1000);
    window.addEventListener('resize', this.debouncedHandleResize);
  }

  handleResize = () => {
    console.log(this.someValue);
  }
}

This works as expected. 1000ms after a window resize the handleResize method fires and console logs 'Hello'.

Why can I not do the follow though?

class Test extends Component {
  someValue = 'Hello';

  debouncedHandleResize = debounce(this.handleResize, 1000);

  ponentDidMount() {
    window.addEventListener('resize', this.debouncedHandleResize);
  }

  handleResize = () => {
    console.log(this.someValue);
  }
}

In this scenario I get an error:

TypeError: Expected a function

I must be missing something, but I thought both were basically ways of assigning a property value to the class.

• javascript
• reactjs
• ecmascript-6
• lodash
• debouncing

• seems weird you would have handleResize multiple times.... – epascarello Commented Jun 28, 2018 at 19:15
• The code works fine when I run it in a stack snippet. – Felix Kling Commented Jun 28, 2018 at 19:20
• @epascarello My apologies, I had a couple of typos in there. I've corrected them now. – CaribouCode Commented Jun 28, 2018 at 19:21
• console.log('this.handleResize', this.handleResize); debouncedHandleResize = debounce(this.handleResize, 1000); – epascarello Commented Jun 28, 2018 at 19:26
• debounce won't cause the error you've mentioned, there's no such problem with it (except that you didn't bind neither debouncedHandleResize nor handleResize). Consider providing stackoverflow./help/mcve that can replicate the issue. – Estus Flask Commented Jun 28, 2018 at 19:28

3 Answers 3

Since you have updated the code: The problem is that both debouncedHandleResize and handleResize are public class fields. Because the debouncedHandleResize assignment es first, you are trying to reference handleResize before it exists.

Public class fields are evaluated in order, so

class Test {
  debouncedHandleResize = debounce(this.handleResize, 1000);

  handleResize = () => {
    console.log(this.someValue);
  }
}

is equivalent to

class Test {
  constructor() {
    this.debouncedHandleResize = debounce(this.handleResize, 1000);

    this.handleResize = () => {
      console.log(this.someValue);
    }
}

It should be obvious why this cannot work.

Solution

Change the order of the assignments:

class Test {
  handleResize = () => {
    console.log(this.someValue);
  }
  debouncedHandleResize = debounce(this.handleResize, 1000);
}

Perhaps it should be:

class Test extends React.Component {
    ...
}

I discovered where the problem is. In my second example (the one that throws an error), the class property is set like this:

debouncedHandleResize = debounce(this.handleResize, 1000);

The error is plaining for some reason that it doesn't like this.handleResize and says it's not a function. Whilst I don't 100% understand this, a simple test of manually passing in a function instead removed the error:

debouncedHandleResize = debounce(() => false, 1000);

With this knowledge, my new and successful way to write the class is:

class Test extends Component {
  someValue = 'Hello';

  ponentDidMount() {
    window.addEventListener('resize', this.handleResize);
  }

  handleResize = debounce(() => console.log(this.someValue), 1000)
}