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

Bound class property functions don't hot reload #15363

Closed
levibuzolic opened this issue Aug 4, 2017 · 7 comments
Closed

Bound class property functions don't hot reload #15363

levibuzolic opened this issue Aug 4, 2017 · 7 comments
Labels
Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@levibuzolic
Copy link
Contributor

Is this a bug report?

Yes.

Have you read the Bugs section of the How to Contribute guide?

Yes.

Environment

react-native-cli: 2.0.1
react-native: 0.47.1
node: 6.9.1
npm: 5.3.0
yarn: 0.27.5
  • Target Platform: iOS
  • Development Operating System: macOS 10.12.6
  • Build tools: react-native run-ios

Steps to Reproduce

  1. Define a component with an auto bound class property function like:
    render() {
      return <View>{this.renderSomething()}</View>;
    }
    
    renderSomething = () => {
      return <Text>Test</Text>;
    }
  2. With Hot Reloading turned on, update the text in the renderSomething function.

Expected Behavior

The component is hot-reloaded and the render is updated.

When using the manual bind in constructor syntax, hot reloading works.

Actual Behavior

Hot reloading message shows up but the bound function isn't re-rendered.

Reproducible Demo

https://github.com/levibuzolic/HotReloadBug

import React from 'react';
import {View, Text} from 'react-native';

export default class HotReloadingTest extends React.Component {
  constructor(props) {
    super(props);

    this.manualBind = this.manualBind.bind(this);
  }

  render() {
    return (
      <View style={{flex: 1, paddingTop: 20}}>
        <View style={{flex: 1, backgroundColor: 'rgba(0, 255, 0, 0.1)'}}>
          {this.manualBind()}
        </View>
        <View style={{flex: 1, backgroundColor: 'rgba(255, 0, 0, 0.1)'}}>
          {this.autoBind()}
        </View>
      </View>
    );
  }

  manualBind() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Manual reloads fine</Text>
      </View>
    );
  }

  autoBind = () => {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Auto doesn’t hot reload</Text>
      </View>
    );
  }
}

kapture 2017-08-04 at 12 42 21

@levibuzolic levibuzolic changed the title Bound Class Property Functions don't Hot Reload Bound class property functions don't hot reload Aug 4, 2017
@mfrachet
Copy link

mfrachet commented Aug 4, 2017

Can this be related to #10991 (comment) ?

@levibuzolic
Copy link
Contributor Author

Yes, @mfrachet I think it may be.

Looks like it's likely because React Native is using react-transform-hmr and not the newer react-hot-loader.

Unfortunately @bvic23's solution - babel-plugin-functional-hmr doesn't appear to work for arrow functions defined in classes.

@hramos
Copy link
Contributor

hramos commented Aug 4, 2017

Duplicate of #10991

@geraintwhite
Copy link
Contributor

@hramos can you re-open this as it is a different issue to #10991

@hramos hramos reopened this Jul 16, 2018
@trongnd
Copy link

trongnd commented Aug 29, 2018

I created this babel plugin babel-plugin-transform-class-bound-properties to solve hot loading issue with class bound properties. Works with babel 6.x

@stale
Copy link

stale bot commented Nov 27, 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 27, 2018
@stale
Copy link

stale bot commented Dec 4, 2018

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Dec 4, 2018
@facebook facebook locked as resolved and limited conversation to collaborators Dec 5, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

5 participants