About a month ago, React Hooks came out, and it immediately turned out that React-Hot-Loader spoils all the raspberries and not only is not very compatible with them, so also the rest of the code breaks. In general, it was a hot month ...

What's inside?

• New API for HMR
• Full support for React 16.6 - React.lazy, React.memo and forwardRef
• Of course hooks
• React - dom (whatever that means)
• Webpack plugin
• Automagic ErrorBoundaries
• Pure render
• “Principles”

New API for HMR

Almost nothing has changed here - it was hot - hot remained. Just got shorter and smarter:

Before

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

Now

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

In fact, the new hot is just old, divided into two parts. As a result, situations can be detected when the first part was called, and the second one was not ( details ).

React 16.6 support

forwardRef simply works (nobody said that they didn’t work before), the memo will be updated even though it is a memo , but lazy learned to re-import its insides.

And of course, everything works right from the market.

React Hooks support

After the release of 16.7, it became clear that with the Hooks trouble. Unfortunately, major projects such as the StoryBook ( issue ) and Gatsby ( issue ) were subject to this disaster.

The problem flowed from the very nature of React-Hot-Loader — in order to deceive React and prevent the destruction of the old version of the HotLoader tree, it wraps each component into a wrapper, which changes only the reference to the “real” component inside.
Of course, the SFCs were wrapped in Components, and everything broke.

In fact, the SFCs turned around with the SFCs that returned an instance of the Class. Very undocumented "factory" feature of React.

The community quickly found a way out (which I didn’t think of right {pureSFC: true} ), I only needed to change one option - {pureSFC: true} , and RHL would go into a simpler mode of operation, which had previously been turned off due to a problem with deep- force-update, which we have also updated.

React-Hot-Dom

Hot-Loader has always been about hacking React, and did it through the createElement overload and returning the "proxied" components to deceive the check inside React-Dom . Now Hot-Loader will hack just this very check :) It works amazingly.

Unfortunately, the API itself does not provide any API for this, because we have released a special package - hot-loader / react-dom with all the necessary patches.

Putting "patch" is simple:

 // 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 

For those who don’t want to install the left packages, the package includes a webpack-loader which specifically patches your version of react-dom.

Webpack-loader

The same webpack loader, which we nailed in version 4, came back to us again. What for?

• To quickly override node_modules and provide more code information.
• To patch react-dom
• For those who do not like babel

Automagic ErrorBoundaries

Errors during development are a favorite thing, but nobody liked the react-hot-loader errors — it simply didn’t work very well, and sometimes it didn’t work at all.

Starting from version 4.6, React-Hot-Loader will add to all components via componentDidCatch before the update, and then remove it after the update. Errors can be caught and show "just-in-place".

It seems like a trifle, but this trifle changes the whole development process. And of course, everything is customized to your taste.

"Pure" Render

This problem has always been with Hot-Loader. While not poked his nose . In short - in React Dev Tools, you can right-click to open the menu, and jump directly to the component ... More precisely (it was) you cannot do it

Now there is a pureRender option, as long as it is turned off by default, which removes a couple of side effects from the Component that lead to this byak.

Unfortunately, this only works for "Class based" components, the SFC requires a patch in the react-dom, which was discussed above.

In principle, it is now possible to practically hide the HotLoader in the system.

Principles

Just a week ago, Dan Abramov published his wish list for the hot-loader - 22 principles that a hot-loader must meet to be “right”, if not white and fluffy.

Currently, 14 points are 100% fulfilled, and another 4 are at 50%. Total - 17 out of 22. In principle, not bad, and it is clear what needs to be done to finish the rest.
Who knows, you can be after this Dan will return to the project.

So that

• just update the hot loader!
• replace the old hot with the new hot , I know - it sounds weird, but you understood me.
• try to patch react-dom somehow. It is not necessary that everything will work well without this step - but it will be quite good with it.
• in theory everything. Should work. Just try it.

Has been with you ️

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