React.js - using property initializers for all component methods

Question

I am working on a React Native project and I'm using ES6 classes for React components.

Since React components defined via ES6 classes don't have autobinding, the React team recommends combining ES7 property initializers with arrow functions to create the same effect.

In order to be consistent and prevent confusion with this-binding, I am using ES7 property initializers for all component methods:

class Foo extends React.Component {
  constructor(props) {
    super(props);
    ...
  }

  componentDidMount = () => {
      ...
  };

  bar = () => {
    ...
  };

  render = () => {
    ...
  };
}

I was wondering -- are there any serious performance caveats to be aware of? In particular, I'm wondering about the render() method.

Overall, does this seem like a good approach?

Answer 1

The biggest caveat is that this particular feature is not standard nor agreed on yet. (It won't be ES7 since there is no ES7. Maybe ES2017 but still unclear.)

There is also a cost to allocating several new long lived objects and storing them on the class.

I wouldn't recommend this. Just for callbacks.