1. 17
    Hot Reload a React App in Development with react-hot-loader
    6m 23s

Hot Reload a React App in Development with react-hot-loader

Andy Van Slaars
InstructorAndy Van Slaars

Share this video with your friends

Send Tweet

Generating new bundles when we change files is a great start, and the live-reload provided by webpack dev server is convenient, but a reload means we lose our application state. When you want to see the results of minor adjustments while your application is in a specific state, it would be more convenient if we could have our changes reflected without losing that state. In this lesson, we'll add hot reloading to our development webpack server so our changes will be reflected in the browser when we save new changes, without the need to a refresh.

Artificial Labs
Artificial Labs
~ 2 years ago

Can you please explain why you do not install react-hot-loader as a dev-dependency? I saw some examples on the web where import {hot} ... was not used, and instead if (module.hot)... was used along with slightly different implementation (module.hot.accept(...), etc.) What do you think of this kind of approach in regards to installing react-hot-loader as a dev-dependency? I am also wondering what implications of using react-hot-loader as a dev-dep you would see in terms of having react-hot-loader/babel in .babelrc as an element in plugins array - instead of having it in dev-related webpack config. I checked the production build of my project (with react-hot-loader as a dev-dep) and it went fine.

Petros Kyriakou
Petros Kyriakou
~ 2 years ago

@Artificial Labs, if you check the github page of react-hot-loader it says this

"Note: You can safely install react-hot-loader as a regular dependency instead of a dev dependency as it automatically ensures it is not executed in production and the footprint is minimal."

So its safe to be used as a normal dependency

mark connelly
mark connelly
~ 2 years ago

I was following along in a windows based environment and output was not showing when the code changed from Count: {this.state.count} to Count: {count}.

using this code instead had me up and running again.

        <h2 className={this.state.count > 10 ? 'warning' : null}>
            Count: {this.state.count}
        </h2>
Rahil
Rahil
~ 2 years ago

why isn't module undefined here, I checked my console and module is actually an object. Please inform where does this module object come from?

Andy Van Slaars
Andy Van Slaarsinstructor
~ 2 years ago

why isn't module undefined here, I checked my console and module is actually an object. Please inform where does this module object come from? module comes from webpack. You can read more about it here: https://webpack.js.org/api/module-variables/#module-hot-webpack-specific-

Andy Van Slaars
Andy Van Slaarsinstructor
~ 2 years ago

I was following along in a windows based environment and output was not showing when the code changed from...

@mark - are you missing the line at the top of the render method where state is destructured: const {count} = this.state?

The OS you're developing on shouldn't change this behavior.

Doma
Doma
~ 2 years ago

Hi Andy,

First of all, I'd like to thanks for such a great tutorial. I have 2 questions in this section.

  1. Why not just use webpack default HotModuleReplacementPlugin instead of react-hot-loader?

i.e. ./webpack.config.dev.js ... +const webpack = require('webpack')

module.exports = merge(baseConfig, { mode: 'development', devServer: { port: 9000, hot: true }, devtool: 'source-map',

  • plugins: [new webpack.HotModuleReplacementPlugin()] })

./src/index.js

if (module.hot) { module.hot.accept('./App', () => { ReactDOM.render(<App />, document.getElementById('app')) }) }

  1. What if I need to connect redux store and hot reload? Can you simplify a demo?

Thanks. Darren

2359 Media
2359 Media
~ 2 years ago

Hi Andy,

Just want to ask, where did the --watch go?

Thanks

Hafeez Syed
Hafeez Syed
~ 2 years ago

Hi Andy,

Is there a way to get HMR work for CSS changes as well ?

When I make changes to .css files, the browser reloads instead of just changing the styles.

Thanks

Federico Hatoum
Federico Hatoum
~ 2 years ago

@Kane, In lesson 13 Andy replaced the "dev" script call in package.json with webpack-dev-server which automatically does a --watch.

Ahmed Soliman
Ahmed Soliman
~ a year ago

Why is react-hot-module a babel plugin not a webpack plugin ?