React-Hot-Loader v4.6

    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, it also breaks the rest of the code. 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

    Here, almost nothing has changed - was hot- remained hot. Just got shorter and smarter:

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

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

    In fact, the new one hotis just old, divided into two parts. As a result, it is possible to detect situations when the first part was called, and the second is not ( details ).

    React 16.6 support

    forwardRefjust works (no one said that they did not work before), it memowill be updated despite the fact that he memo, well, he lazylearned to re-import his entrails.

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

    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, each component is wrapped 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 away), 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 now updated too.


    Hot-Loader has always been about hacking React, and did it through overloading createElementand returning "proxied" components in order to trick 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 that specifically patches your version of react-dom.


    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 before componentDidCatch, and begin to remove 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.
    Error Reporter

    "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

    dev tools

    Now there is an option pureRender, 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.


    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.

    At the moment, 14 points are made of 100%, and 4 to 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 one hotwith a new one 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 ️

    Also popular now: