A question about binding functions inside PureComponent?

[hoorsa]

Is this a bug report?

No

Have you read the Contributing Guidelines?

Yes

Environment

OS:  Windows 8
Node:  8.5.0
Yarn:  Not Found
npm:  4.6.1
Watchman:  Not Found
Xcode:  N/A
Android Studio:  2.3 AI-162.4069837

Packages: (wanted => installed)
react-native: ^0.49.2 => 0.49.5
react: ^16.0.0-beta.5 => 16.0.0

Target Platform: Android (6.0)

Hi,
Goal is best performance. Which of below script result is better in performance (this is the renderItem PureComponent of a large FlatList):

1:

class MyComponent extends React.PureComponent {
  
  constructor(props) {
    super(props);
    this.doWork = this.doWork.bind(this);
  }
  doWork() {
    // doing some work here.
  }
  
  render() {
    return <Text onPress={this.doWork}>Do Some Work</Text>
  }
  
}

2:

class MyComponent extends React.PureComponent {
  doWork = () => {
    // doing some work here.
  }
  
  render() {
    return <Text onPress={this.doWork}>Do Some Work</Text>
  }
  
}

3:

class MyComponent extends React.PureComponent {
  doWork(){
    // doing some work here.
  }
  
  render() {
    return <Text onPress={() => this.doWork}>Do Some Work</Text>
  }
  
}

4:

class MyComponent extends React.PureComponent {
  doWork(){
    // doing some work here.
  }
  
  render() {
    return <Text onPress={ this.doWork.bind(this) }>Do Some Work</Text>
  }
  
}

5:
Your script...

[ilijaNL]

1 & 2 (2 uses new ES class properties) both are the same and recommended

[somonek]

3 & 4 are bad for performance because you do extra work on each render.
3 creates a new function each time and 4 does the binding on each render.
Personally I think # 2 is not so elegant, so number one wins even though I like this decorator https://github.com/andreypopp/autobind-decorator which gives you the overview of where the context is bound directly on the method. If you have a large class, you don't need to scroll up to the constructor and check. Often you don't even need the constructor.

[somonek]

just for additional info, you can take a look at this proposal as well https://www.npmjs.com/package/babel-plugin-transform-function-bind

[hoorsa]

thank you @Rusfighter and @somonek .