Class instance properties do not work in async arrow functions

[rrgomide]

🐛 Bug Report

Hi, I've been trying to upgrade a project created with React Native 0.51.0 and, starting from 0.57, class instance properties are not working correctly anymore in async arrow functions (in my opinion). They're correctly interpreted in async functions (not arrow functions) as you'll see in the code examples. In my old project everything works as expected. My guess is that it's a problem with babel config, since it has been upgraded to version 7 and at react-native 0.51 it was version 6.

To Reproduce

Create any project from react-native 0.57 or later versions. I haven't tried with Expo.

Expected Behavior

this.number should be read correctly on componentDidMount arrow function.

Code Example

export default class App extends Component {
  constructor() {
    super();

    //Instance property
    this.number = 1;
  }

  //async arrow function
  componentDidMount = async () => {
    console.log(this.number); //it shows undefined and "this" is the global one
    this.otherMethod();
  };

  //"normal" async function
  async otherMethod() {
    console.log(this.number); //it shows 1 and expected value for "this"
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

I put the following similar code in Babel's "try out" feature and tested on Chrome. Everything worked as expected. That's why I created the issue here, on react-native project:

class Test {
  constructor() {
    this.number =1;    
  }
  
  sum = async() => {
    this.number++;
    console.log(this.number);
  }  
  
  test = async() => {
    fetch('http://google.com').then((res) => {
      this.number++;
      console.log(this.number);
    })
    .catch((error) => {
      this.number++;
      console.log(this.number);
    })
  }
}

const test = new Test();
test.sum();

Environment

React Native Environment Info:
System:
OS: Windows 7
CPU: (8) x64 Intel(R) Core(TM) i7-4770 CPU @ 3.40GHz
Memory: 173.64 MB / 7.91 GB
Binaries:
Node: 10.15.1 - C:\nodejs\node.EXE
Yarn: 1.13.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.7.0 - C:\nodejs\npm.CMD

[JKCooper2]

I believe this is actually an issue with console.log (i had similar weird behaviour logging around async code with a non react js function earlier today)

Can you test by calling an alert instead of using console.log?

Unable to repro when assigning to new value and displaying (number should be a value assignment) https://snack.expo.io/@jkcooper/cm4yND

[rrgomide]

@JKCooper2, thanks for the reply! It worked on the expo link, but using my Android Emulator it didn't. "Mount" and "Other" were empty on screen.

Here are my dependencies and devDependencies from package.json. It's a brand new project from "react-native init".

  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.1"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/runtime": "^7.4.0",
    "babel-jest": "^24.5.0",
    "jest": "^24.5.0",
    "metro-react-native-babel-preset": "^0.53.1",
    "react-test-renderer": "16.8.3"
  },

[Salakar]

I've been unable to reproduce on a fresh project with the following:

export default class App extends Component {
  constructor() {
    super();

    //Instance property
    this.number = 1;
  }

  //async arrow function
  componentDidMount = async () => {
    console.warn('mount', this.number);
    console.log('mount', this.number);
    this.otherMethod();
  };

  //"normal" async function
  async otherMethod() {
    console.warn('otherMethod', this.number);
    console.log('otherMethod', this.number);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
      </View>
    );
  }
}

I've tried this on device, and whilst debugging:

On Device:

Debugging:

@rrgomide please can you create a reproducible example that we could clone

Thanks

[rrgomide]

@Salakar I think you nailed it along with @JKCooper2! I did the same as @Salakar did and it seems the problem only happens while debugging the code.

I've been using VSCode with "React Native Tools" Extension to do so. So I guess the problem is not related to react-native. Thank you so much for your time!