No Result
View All Result
Cloud Reports
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital
No Result
View All Result
Cloud Reports
No Result
View All Result

Migrate from Hot Reload to Fast Refresh

npn by npn
December 16, 2020
in React
Reading Time: 3min read
A A
0
Migrate from Hot Reload to Fast Refresh
ADVERTISEMENT

Background

I used React to enable HMR for webpack and webpack-dev-server using the following modules, but I didn’t like it because the Functional Component wasn’t updated properly. Since it’s a big deal, I will use react-refresh provided by react recently to make it a cool development environment. Please note that the writing style before the change seems to be old in the first place.

READ ALSO

If you want to learn React JS within 3 months, the following 8 basics must first be known

If you want to learn React JS within 3 months, the following 8 basics must first be known

December 22, 2020
15
ReactJs Setup tutorial for Beginner – ReactJs tutorial [P1]

Pathway to learn javascript to reactjs

December 21, 2020
16
  • @ hot-loader / react-dom
  • react-hot-loader

Overview

Remove react-hot-loader and install react-refresh-webpack-plugin .

the manner of the introduction of-Refresh-React Webpack-Plugin, for people who guide came from the react-hot-loader, will continue to make changes in accordance with.

Before

webpack.dev.js

 module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
/* Omission */
  resolve: {
    alias: {
      "react-dom": "@hot-loader/react-dom",

index.tsx

import React from "react"
import ReactDOM from "react-dom"

function renderApp() {
  ReactDOM.render(<App />, document.querySelector("#root"))
}

if (module.hot) {
  module.hot.accept("components/App/App", () => {
    renderApp()
  })
}

App.ts

import { hot } from "react-hot-loader/root"
import React from "react"

/* Omission */

export default hot(App)

After

  • Remove alias for @ hot-loader / react-dom
  • Added react-refresh / babel to babel-loader plugins
  • Added ReactRefreshWebpackPlugin to plugins

webpack.dev.js

const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin")



  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            plugins: [require.resolve("react-refresh/babel")],
          },


  plugins: [
    new ReactRefreshWebpackPlugin()

Remove module.hot.accept()

index.tsx

import React from "react"
import ReactDOM from "react-dom"

function renderApp() {
  ReactDOM.render(<App />, document.querySelector("#root"))
}

renderApp()

Remove hot()

ADVERTISEMENT
import React from "react"



export default App

Remove react-hot-loader/babel from .babelrc

.babelrc

-    "react-hot-loader/babel",

Afterword

It was easy. It feels good to update the Functional Component without reloading.

ShareTweetShare
Previous Post

[React] React installation for Mac

Next Post

Developers and Trades united in 2021?

npn

npn

Related Posts

If you want to learn React JS within 3 months, the following 8 basics must first be known
Javascript

If you want to learn React JS within 3 months, the following 8 basics must first be known

December 22, 2020
15
ReactJs Setup tutorial for Beginner – ReactJs tutorial [P1]
React

Pathway to learn javascript to reactjs

December 21, 2020
16
Smooth UI System: a new way to style your components
React

Smooth UI System: a new way to style your components

December 18, 2020
15
React

React Document ~ Essential JSX Knowledge

December 17, 2020
12
[React] React installation for Mac
React

[React] React installation for Mac

December 16, 2020
6
Deploy Next.js to Firebase for SSR and API Route
React

Deploy Next.js to Firebase for SSR and API Route

December 15, 2020
86
Next Post
Developers and Trades united in 2021?

Developers and Trades united in 2021?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

No Result
View All Result

Categories

  • Android (1)
  • Ant Design tutorial (7)
  • Javascript (21)
  • Layout and Routing (2)
  • Linux (3)
  • PC & Laptop (88)
  • React (17)
  • SQL (2)
  • Technology & Digital (256)
  • The Basics (5)
  • Web development (38)

Search

No Result
View All Result
No Result
View All Result
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital