Refactoring react this binding

Question

I have this code

class BottomPanel extends React.Component<Props, {}> {
  constructor(props) {
    super(props);
    this.dropDownUpdate = this.dropDownUpdate.bind(this);
  }

  dropDownUpdate = e => this.setState({ dropDownValue: e.currentTarget.textContent });

I was wondering if I can refactor

this.dropDownUpdate = this.dropDownUpdate.bind(this);

to

this.dropDownUpdate = this.dropDownUpdate;

if so, why or why not? I just saw it somewhere being done this way

this.dropDownUpdate = this.dropDownUpdate;

I'm not sure if I can apply it to my code.

yup, I think so far it is working. But, I don't really want to use it unless I understand why. — user1176111, Apr 19 '19 at 06:08
doesn;t it work the same without the `this.dropDownUpdate = this.dropDownUpdate.bind(this);` line? — nick zoum, Apr 19 '19 at 07:28

score 2 · Accepted Answer · answered Apr 19 '19 at 06:29

One thing to be aware of, is that when you write:

class BottomPanel extends React.Component<Props, {}> {
  dropDownUpdate = e => this.setState({ dropDownValue: e.currentTarget.textContent });
}

This (currently) is not valid ES6 syntax. You can't assign a class variable with an equals sign that way. The reason it works is because of the transform-class-properties babel plugin, more on that below.

See this question and answer for more details:

ES6 class variable alternatives

Technically, the right way to declare a class variable is with the this keyword like:

class BottomPanel extends React.Component<Props, {}> {
  constructor(props) {
      this.dropDownUpdate = this.dropDownUpdate.bind(this)
  }

   dropDownUpdate(e) {
       this.setState({ dropDownValue: e.currentTarget.textContent });
   }
}

For why you can't just do:

class BottomPanel extends React.Component<Props, {}> {
  constructor(props) {
      this.dropDownUpdate =e => this.setState({ dropDownValue: e.currentTarget.textContent });
  }
}

see this post: Can I use arrow function in constructor of a react component?

Now the thing is - I assume that you are using Create React App - which comes with the transform-class-properties babel plugin - which is why that first declaration works.

Take a look at this question as to why you would want to to the this.dropDownUpdate = this.dropDownUpdate.bind(this); trick. It's not necessary - but you run into a debugger issue (the browser not being aware of the transform-class-properties babel transform).

Chrome, Firefox debuggers not displaying the correct value for 'this' in a react app

Otherwise you can just clear your class methods like:

class BottomPanel extends React.Component<Props, {}> {
  dropDownUpdate = e => this.setState({ dropDownValue: e.currentTarget.textContent });
}

score 1 · Answer 2 · answered Apr 19 '19 at 06:28

1

Since dropDownUpdate is an Arrow function, It should work as expected without

this.dropDownUpdate = this.dropDownUpdate; Or

this.dropDownUpdate = this.dropDownUpdate.bind(this);

In Arrow functions, value of this is lexically bound, unlike regular functions where the value of this changes based on the context in which the function is called.

answered Apr 19 '19 at 06:28

phpcoderx

570
5
16

1

See this: https://stackoverflow.com/questions/43600967/can-i-use-arrow-function-in-constructor-of-a-react-component – dwjohnston Apr 19 '19 at 06:30
Thanks for mentioning! @user1176111 Do checkout the pros and cons of each. – phpcoderx Apr 19 '19 at 07:04

Dhara Charola · Answer 3 · 2019-04-19T07:25:55.237

0

Just define your function as below.

dropDownUpdate = (event) => { .... }

It wont need to bind in constructor

edited Apr 19 '19 at 07:25

answered Apr 19 '19 at 06:25

Dhara Charola

332
2
12

This only works if you are using the `transfrom-class-properties` babel plugin (which comes with create-react-app) – dwjohnston Apr 19 '19 at 06:31

Refactoring react this binding

3 Answers3