Skip to content

Commit

Permalink
Document usage in production
Browse files Browse the repository at this point in the history
  • Loading branch information
silvenon committed Nov 24, 2019
1 parent 0bbf33a commit ec683ad
Showing 1 changed file with 22 additions and 5 deletions.
27 changes: 22 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,15 @@ Watch
**[Dan Abramov's talk on Hot Reloading with Time Travel](https://www.youtube.com/watch?v=xsSnOQynTHs).**

# Deprecation note

React-Hot-Loader was your friendly neightbour, living outside of React. But it was limiting it's powers and causing not the greatest experience. It's time to make a next step.

__React-Hot-Loader is expected to be replaced by [React Fast Refresh](https://github.com/facebook/react/issues/16604)__. Please remove React-Hot-Loader is Fast Refresh is supported at your environment.
**React-Hot-Loader is expected to be replaced by [React Fast Refresh](https://github.com/facebook/react/issues/16604)**. Please remove React-Hot-Loader is Fast Refresh is supported at your environment.

- `React Native` - [supports Fast Refresh](https://facebook.github.io/react-native/docs/fast-refresh) since 0.61.
- `parcel 2` - [supports Fast Refresh](https://github.com/facebook/react/issues/16604#issuecomment-556082893) since alpha 3.
- `webpack` - no support yet, use React-Hot-Loader
- `other bundler` - no support yet, use React-Hot-Loader
* `React Native` - [supports Fast Refresh](https://facebook.github.io/react-native/docs/fast-refresh) since 0.61.
* `parcel 2` - [supports Fast Refresh](https://github.com/facebook/react/issues/16604#issuecomment-556082893) since alpha 3.
* `webpack` - no support yet, use React-Hot-Loader
* `other bundler` - no support yet, use React-Hot-Loader

## Install

Expand Down Expand Up @@ -161,6 +162,20 @@ export default hot(module)(App);
webpack-dev-server --hot
```

## What about production?

The webpack patch, `hot`, Babel plugin, `@hot-loader/react-dom` etc. are all safe to use in production; they leave a minimal footprint, so there is no need to complicate your configuration based on the environment. Using the Babel plugin in production is even recommended because it switches to cleanup mode.

Just ensure that the production mode has been properly set, both as an environment variable and in your bundler. E.g. with webpack you would build your code by running something like:

```
NODE_ENV=production webpack --mode production
```

`NODE_ENV=production` is needed for the Babel plugin, while `--mode production` uses [`webpack.DefinePlugin`](https://webpack.js.org/plugins/define-plugin/) to set `process.env.NODE_ENV` inside the compiled code itself, which is used by `hot` and `@hot-loader/react-dom`.

Make sure to watch your bundle size when implementing react-hot-loader to ensure that you did it correctly.

## Limitations

* (that's the goal) React-Hot-Loader would not change the past, only update the present - no lifecycle event would be called on component update.
Expand Down Expand Up @@ -437,7 +452,9 @@ export default hot(Hello); // <-- module will reload itself
Wrapping this root component with `hot()` will ensure that it is hot reloaded correctly.

### Out-of-bound warning

You may see the following warning when code-split components are updated:

```console
React-Hot-Loader: some components were updated out-of-bound. Updating your app to reconcile the changes.
```
Expand Down

0 comments on commit ec683ad

Please sign in to comment.