React-Hot-Loader 4.6
Tags: javascript, react, devtools
Published: 2018-12-13 12:01:59

---
title: React-Hot-Loader 4.6
published: true
description: ⚛️🔥🙀 - Hooks, Errors and Rock-n-roll!
tags: JavaScript, React, DevTools
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vnpij3n73k4vjz2l38qd.png
---
# 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 hotter than before!
>Before
```js
import {hot} from 'react-hot-loader';
....
export default hot(module)(MyComponent)
```
>Now
```js
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.
{%github https://github.com/gaearon/react-hot-loader/issues/1078 %}

# 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.

{%github https://github.com/gatsbyjs/gatsby/issues/9489 %}
{%github https://github.com/storybooks/storybook/issues/4691 %}

The problem was coming from React-Hot-Loader nature – it was wrapping SFC with Class-based component, which does not support hooks.
The community quickly found a way to fix it – just change one option, and tell RHL to stop wrapping SFC – `{pureSFC: false}`.

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](https://github.com/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".

{% twitter 1072626544135335936 %}


# "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..

![dev tools](https://thepracticaldev.s3.amazonaws.com/i/d7lflk9fj1juj7hyhykq.gif)

https://github.com/facebook/react-devtools/pull/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.

https://overreacted.io/my-wishlist-for-hot-reloading/

{% github https://github.com/gaearon/react-hot-loader/issues/1118 %}

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!

⚛️🔥🤓

https://github.com/gaearon/react-hot-loader