Bound class property functions don't hot reload

[levibuzolic]

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>
    );
  }
}

[mfrachet]

Can this be related to #10991 (comment) ?

[levibuzolic]

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]

Duplicate of #10991

[geraintwhite]

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

[trongnd]

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]

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]

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.