Hot Reload not working in 0.59.4

[gvsakhil]

• I went through all the Documentation
• I have searched existing issues

Hot Reloading is not updating the view in Android device even we have made changes. It happens after a Reload triggered from the device.

Environment

Node: 10.15.1
Xcode: N/A

System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
Memory: 1.54 GB / 7.87 GB
Binaries:
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.3.0.0 AI-182.5107.16.33.5199772

Steps to Reproduce

1. Run react-native run-android
2. When the project loaded, enable the Hot Reloading
3. Make changes to the App.js, like editing the text. The change should appear in the device.
4. Do Reload on the device
5. Repeat step 4, but the change won't appear at the device. Just a toast of Hot reloading appears.

Expected Behavior

The Hot Reloading should be able to hot-reload all the changes, regardless number of attempts of reload.

Actual Behavior

The Hot Reloading only works before a Reload action triggerred

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write `[skip envinfo]` alongside an explanation in your Environment: section.

[gvsakhil]

Updated my Environment Section

[JKCooper2]

Are you able to replicate with a new minimal react-native app? And does hot reloading work for a previous version of react-native with your code?

[DaniAkash]

@JKCooper2 I upgraded my react native project from 0.57 to 0.59 using rn-diff and it no longer hot reloads any changes to the UI. It is showing the hot reloading toast message but nothing changes. I then created a new project and tried, this time the hot reloading is working fine in the new project. I had to downgrade back to 0.57 because of this issue.

My environment details:

  React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
      Memory: 28.09 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.14.1 - /usr/local/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        Build Tools: 27.0.3, 28.0.3
        API Levels: 23, 25, 26, 27, 28
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5314842
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      @storybook/react-native: ^4.1.4 => 4.1.4 
      react: 16.5.0 => 16.5.0 
      react-native: 0.57.1 => 0.57.1 
    npmGlobalPackages:
      react-native-cli: 2.0.1

[JKCooper2]

@DaniAkash unfortunately if its working with a new project but not with your existing one then it's likely either something hasn't been updated correctly, or there's an issue with your code.

I would recommend checking out the your upgrade process, as its the most likley culprit

[react-native-bot]

I am closing this issue because it does not contain the necessary environment info, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

[DaniAkash]

@JKCooper2 updated my project to React Native 0.60 and hot reload is still broken. However this time, even the new projects are not hot reloading. Even tried it on a different machine and hot reload is broken!

[rastapasta]

@DaniAkash make sure to test with a non functional component, ran into the same issue before finding expo/expo#4957 (comment) :

Turns out hot reload doesn't support functional component (facebook/react-native#10991)

[dimlksin2]

[DaniAkash]

@rastapasta my components are wrapped in decorators. I'm using MobX so they will have @inject and @observer decorators. And I'm also using a custom @ErrorBoundary decorator which looks like this:

const ErrorBoundary = ({ isRoot } = {}) => WrappedComponent => {
  return class extends Component {
    static navigationOptions = WrappedComponent.navigationOptions;

    state = {
      isCrashed: false
    };

    componentDidCatch(error, errorInfo) {
      logError(error, { errorInfo });
      if (!this.state.isCrashed) {
        this.setState({
          isCrashed: true
        });
      }
    }

    render() {
      if (this.state.isCrashed) {
        return (
          <CrashScreen isRoot={isRoot} navigation={this.props.navigation} />
        );
      }
      return <WrappedComponent {...this.props} />;
    }
  };
};

So all class components are wrapped in this error boundary decorator...

[nathsimpson]

Also, make sure you don't have an index.lock file in your .git directory :) Deleting it could solve your issue.

[MadDeveloper]

I'm facing the same issue, since the beginning of my project.

  React Native Environment Info:
    System:
      OS: macOS 10.14.4
      CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
      Memory: 800.38 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.8.0 - ~/.nvm/versions/node/v12.8.0/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.10.2 - ~/.nvm/versions/node/v12.8.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
      Android SDK:
        API Levels: 23, 28, 29
        Build Tools: 28.0.3, 29.0.0
        System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 10.3/10G8 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.9.0 => 16.9.0
      react-native: 0.59.5 => 0.59.5
    npmGlobalPackages:
      react-native-cli: 2.0.1

A way to fix it?

[gaearon]

React Native 0.61 includes a complete reimplementation of this mechanism called Fast Refresh. It's not out yet as stable, but you can already try React Native 0.61 RC 3.

I'll close and lock this because the implementation is completely different. So if there are still problems after you upgrade to 0.61, please file a new issue with full reproducing instructions (and preferably, a project). Thanks!