Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Functional components allow to have this reference #18942

Closed
3 tasks done
riwu opened this issue Apr 19, 2018 · 4 comments
Closed
3 tasks done

Functional components allow to have this reference #18942

riwu opened this issue Apr 19, 2018 · 4 comments
Labels
Bug JavaScript Resolution: Locked This issue was locked by the bot.

Comments

@riwu
Copy link

riwu commented Apr 19, 2018

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 9.10.1
Yarn: 1.5.1
npm: 3.10.10
Watchman: 4.7.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.2 => 0.55.2

Steps to Reproduce

const Example = props => (
  <Button
    title="Click"
    onPress={() => {
      this.count = (this.count || 0) + 1;
      props.setCount(this.count);
    }}
  />
);

class App extends React.Component {
  state = {
    count1: 0,
    count2: 0,
  };
  render() {
    return (
      <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
        <Example setCount={count => this.setState({ count1: count })} />
        <Text>{this.state.count1}</Text>
        <Example setCount={count => this.setState({ count2: count })} />
        <Text>{this.state.count2}</Text>
      </View>
    );
  }
}

In React.js, stateless components are not allowed to have this reference so Example would give an error on click.

In react-native, this unexpectedly behaves like a class property instead.

Both the <Example /> instances share the same this, so clicking on one button would increment this.count for both instances.

@syumai
Copy link

syumai commented Aug 5, 2018

In bundled js file, babel declares _this and intializes with this to transpile arrow functions to es5 functions.
The content of this was the global object named DedicatedWorkerGlobalScope.
I confirmed that the same phenomenon will occur in the release build.

Since a Object (in this case, DedicatedWorkerGlobalScope) is passed,
it can have the count property and the value of its count property can be referenced.

In expo snack, it failes because global object is undefined in snack.
Here's link of snack: https://snack.expo.io/SJVB1fESm

link of a part of bundled JS: https://gist.github.com/syumai/0dbe2d8bcbc17475a211b39ec6ee4241#file-bundle-js-L17

@stale
Copy link

stale bot commented Nov 3, 2018

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Nov 3, 2018
@riwu
Copy link
Author

riwu commented Nov 3, 2018

Should this be fixed?

@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Nov 3, 2018
@hramos hramos removed the Bug Report label Feb 6, 2019
@elicwhite
Copy link
Member

Babel has been updated since 0.55.2, does this repro in 0.59? I'm going to close this as the version in the original post is quite old, but if this reproes still in 0.59 then let us know and we can reopen the issue.

@facebook facebook locked as resolved and limited conversation to collaborators Mar 19, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 19, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug JavaScript Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

5 participants