Now that we've seen why we want it and how to use it, the fun part begins: how it actually works.
-Hot Reloading is built on top of a feature Hot Module Replacement, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.
+Hot Reloading is built on top of a feature Hot Module Replacement, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.
In a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:
The HMR update contains a bit more than just the module's code we want to change because replacing it, it's not enough for the runtime to pick up the changes. The problem is that the module system may have already cached the exports of the module we want to update. For instance, say you have an app composed of these two modules:
diff --git a/blog/2016/03/24/introducing-hot-reloading/index.html b/blog/2016/03/24/introducing-hot-reloading/index.html index 45088c9f57f..99f8a7846b5 100644 --- a/blog/2016/03/24/introducing-hot-reloading/index.html +++ b/blog/2016/03/24/introducing-hot-reloading/index.html @@ -89,7 +89,7 @@Now that we've seen why we want it and how to use it, the fun part begins: how it actually works.
-Hot Reloading is built on top of a feature Hot Module Replacement, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.
+Hot Reloading is built on top of a feature Hot Module Replacement, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.
In a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:
The HMR update contains a bit more than just the module's code we want to change because replacing it, it's not enough for the runtime to pick up the changes. The problem is that the module system may have already cached the exports of the module we want to update. For instance, say you have an app composed of these two modules:
diff --git a/blog/2017/06/21/react-native-monthly-1.html b/blog/2017/06/21/react-native-monthly-1.html index 3c9fa1fe4b0..563f8ec1ff3 100644 --- a/blog/2017/06/21/react-native-monthly-1.html +++ b/blog/2017/06/21/react-native-monthly-1.html @@ -105,7 +105,7 @@On this third meeting, we had 5 teams join us:
On this third meeting, we had 5 teams join us:
On this third meeting, we had 5 teams join us:
Now that we've seen why we want it and how to use it, the fun part begins: how it actually works.
-Hot Reloading is built on top of a feature Hot Module Replacement, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.
+Hot Reloading is built on top of a feature Hot Module Replacement, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.
In a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:
The HMR update contains a bit more than just the module's code we want to change because replacing it, it's not enough for the runtime to pick up the changes. The problem is that the module system may have already cached the exports of the module we want to update. For instance, say you have an app composed of these two modules: