🔥React-Hot-Loader🔥 4.6

⚛️🔥🙀 — Hooks, Errors and Rock-n-roll!

That’s my fireplace

What’s inside?

• New top level API for better HMR
• React 16.6 – React.lazy, React.memo and forwardRef support
• React Hooks support
• React-🔥-dom
• Webpack plugin
• Automagic ErrorBoundaries
• Pure Render
• “Principles”

New top level API

The new hot api is even more hot than before!

• Before

import {hot} from 'react-hot-loader';
....
export default hot(module)(MyComponent)

• Now

import {hot} from 'react-hot-loader/root';
....
export default hot(MyComponent)

Why? We just moved hot(module) inside /root, so HMR would be configured before the module execution, and we would be able to handle errors during update.

Hot reloading shouldn't stop after an error · Issue #1078 · gaearon/react-hot-loader

React 16.6 support

ForwardRef would just work, memo will be updated on HMR(using our new super deep force update), and lazy would auto import updated module. Everything out of the box.

React Hooks support

After React 16.7 release we found that hooks are not supported. At all. as result hooks were not supported by all our consumers, including Storybook and Gatsby.

gatsby-develop | useState from react hooks doesn't work in development environment · Issue #9489 ·…

Storybook not compatible with React hooks · Issue #4691 · storybooks/storybook

The problem was coming from React-Hot-Loader nature – it was wrapping SFC with Class-based component, which does not support hooks.

Community quickly found a way to fix it – just change one option, and tell RHL to stop wrapping SFC – pureSFC.

Now this option is enabled by default. And we added another, game changer option…

React-Hot-Dom

React-Hot-Loader was always about hacking into React, and hiding real updates from it by “presenting” proxy components to it, instead of the real ones. Proxy wrappers were just updating refs to the real components, they represent, thus making hot updates possible.

Version 4.5 changes this – comparison is moved to React-Dom internals, enabling better reconciliation, providing ability to stop wrapping elements(only SFC for now). So RHL could not affect type comparison as before.

To enable advances mode we need to patch react-dom code – and there are two ways to do it – using hot-loader/react-dom(see readme)

// this would always work
yarn add @hot-loader/react-dom@npm:react-dom
// or change your webpack config
alias: {
  'react-dom': '@hot-loader/react-dom'
}
// or do the same with package.json to enable it in parcel

or using our Webpack loader…

Webpack-loader

Webpack loader was a thing we removed in version 4. And here it again.

Use Webpack loader to:

• To quickly handle your node_modules, and help RHL better understand your code or cold everything inside.
• To automatically patch react-dom

Two different options to get a hotter version of React-don’t would fit almost for everyone.

Automagic ErrorBoundaries

Now RHL would inform you about any Error during update, including the ones preventing the update. Also just after Hot Module Replacement (or lazy component update) RHL would inject componentDidCatch to the every Class Based component, to catch Error “just-in-place”.

“Pure” Render

Is something nobody cares for years. React-Hot-Loader was replacing render by it own version like always… But React-Dev-Tools give you ability to right-click on element, and jump to source..

Fix showing component source when React Hot Loader is enabled by macku · Pull Request #1191 ·…

Now you can provide option pureRender(sorry, it’s not enabled by default yet), and side effect from render method would be removed.

Please test this option, and help me make it default.

PS: This option affects only “Class Componets”. For SFC you have to use ignoreSFC, which possible only with react-dom patch.

Principles

And now RHL would try to be more Dan Abramov “hot-principles” compatible. We knew that modern Hot Reloading experience is far (cough) from ideal, are pretty sure that written principles are something we gonna to be compliant with.

My Wishlist for Hot Reloading

🚀 track "principles" compliance · Issue #1118 · gaearon/react-hot-loader

Right now we are compliant with 14, and partially compliant with 4 more of of 22 total. 17/22 — pretty amazing! And it’s known what to do next!

What’s next?

• update your hot loader!
• replace hot with hot, now you know it means.
• (optional*) pick a way to land a patch to react-dom, everything is our readme… *)Everything should work even without this step, but with this step it would work better. There is just a few synthetic cases which truly require this.
• probably no configuration needed — only new hot and new react-dom somehow wired inside.
• And then — party hard!

gaearon/react-hot-loader

⚛️🔥🤓