Hot reloading (HMR) not working with functional components

[thedgbrt]

Description

Hot reloading doesn't work on functional components. The "hot loading" message appears, but the changes don't show up.

Reproduction

react-native init test
cd test

Open index.android.js and replace :

export default class test extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

with

const test = () => (
  <View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Native!
    </Text>
    <Text style={styles.instructions}>
      To get started, edit index.android.js
    </Text>
    <Text style={styles.instructions}>
      Double tap R on your keyboard to reload,{'\n'}
      Shake or press menu button for dev menu
    </Text>
  </View>
);

Enable hot reloading, reload the app and try to make changes.

Additional Information

• React Native version: 0.37.0
• Platform: Android (didn't try ios)
• Operating System: Windows

[lacker]

@martinbigio is this a known behavior of HMR in React Native?

[hey99xx]

Reading https://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html

The default transformer that comes with React Native uses the babel-preset-react-native, which is configured to use react-transform the same way you'd use it on a React web project that uses Webpack.

Looks like that transformer library historically had issues with hot reloading functional components according to gaearon/babel-plugin-react-transform#57

I can guess both iOS and Android will be broken, this seems purely like a limitation of the JavaScript transformation process.

[tlvince]

HMR with stateless functional components throws "Maximum call stack exceeded" for me:

Enabling JS debugging yields:

99 index.js:81 [React Transform HMR] Patching App
ExceptionsManager.js:63 Maximum call stack size exceeded
handleException @ ExceptionsManager.js:63
handleError @ InitializeCore.js:114
reportFatalError @ error-guard.js:44
guard @ MessageQueue.js:48
callFunctionReturnFlushedQueue @ MessageQueue.js:107
(anonymous) @ debuggerWorker.js:71
index.js:81 Uncaught RangeError: Maximum call stack size exceeded
    at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:5867:9
    at wrapWithProxy (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:5872:3)
    at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:102821:1260
    at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:102821:1348
    at loadModuleImplementation (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:188:1)
    at guardedLoadModule (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:133:13)
    at _require (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:124:1)
    at accept (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:285:1)
    at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:243:25
    at Array.filter (native)

Note it loops on [React Transform HMR] Patching App and eventually throws. The same thing works if I rewrite my components to use classes.

Is it possible to switch to gaearon/react-hot-loader (v3) perhaps?

Connects #7288, #8465.

[mattread90]

@tlvince I was experiencing the same issue and fixed it after finding and removing a circular dependency in my project. I noticed that the "Maximum call stack exceeded" was only being thrown when I edited files under a certain level in my "dependency tree".

Not sure it's correct behaviour for the Hot Loading but it could be what is happening in your case too.

[Venryx]

Just wanted to mention I have a similar issue here: gaearon/react-transform-hmr#82

@mattread90 Do you have your project in a public repo, so I can see the commit where you solved the issue?

Because it seems odd to me that you could have a circular dependency, and yet only have it cause problems with the hot-reloading, as opposed to the initial load.

[sospedra]

+1 any news on the horizont?

[mattread90]

@Venryx I don't, but I've recreated the issue here. You should be able to see the app render correctly on initial load, but will throw the "Maximum call stack exceeded" exception on edits to certain files.

[chrislegault]

I'm not seeing the infinite loop, but hot reloading isn't working. I update my styles and they aren't updated on the simulator.

[shahen94]

+1

[ferologics]

Especially painful when working with react-navigation b/c it's almost all composed of functional components that don't reload on save. I think this is a solid dev experience pain point - cc @grabbou is there anything to be done here?

[grabbou]

Not sure there's anything related to react-navigation to be done here. The issue exists in React Native.

[migueloller]

The reason why React Native HMR doesn't work with stateless functional components is because it uses react-transform-hmr which doesn't support them (it says so in the README).

React Native will either have to use something like react-hot-loader (which I'm not sure it can since it doesn't use Webpack but could still implement some of its features in the packager) or roll up their own solution that works for stateless functional components.

[dylanpyle]

I'm seeing the same issue with PureComponent. Let me know if that's unrelated and I can file a different issue — I'm not clear on why #9152 was closed.