Binding in React Native

22 Nov 2018

In his course React for Beginners, Wes Bos recommends we using class fields/properties rather than normal functions that are bound in the constructor. I believe the official react docs also used to recommend this approach but now they warn that this is experimental

Example of class fields/properties:

class MyClass extends Component {
  myMethod = () => {}

myMethod is a class property which you can call in React with onPress={this.myMethod}

Note that you don’t use () with onPress={this.myMethod()} because that would call the function as soon as the screen is mounted.

I think this is much better than the deprecated this.myMethod.bind(this)

I don’t think you can send parameter with class fields/properties so if the method receives a parameter I like to use arrow in render:

onPress={() => this.myMethod(myVariable)}

Another thing I found, in my testing I couldn’t use the class property or arrow functions for the deprecated ListView. Why I am still using ListView? I am using it in conjunction with Realm and it is highly recommended that you use the ListView and ListView.DataSource provided by the realm/react-native module

Maybe that was just me messing things up. Not sure.

I continued to use class properties when I was writing normal js classes (not just jsx for React) because apparently it has advantages. One disadvantage is it gets messed up if you try to use super.myMethod. I don’t completely understand this but using this rather than super seemed to work for me.

Direction the community is taking: