Skip to content

Preact flushing entire components using react-hot-loader #1007

@arqex

Description

@arqex

Hi guys,

I had a tough day trying to make preact work with react-hot-loader v3 but at least I have discovered why.

The problem I had was that preact was flushing an entire form component when typing on an input, it was supposed to just re-render the input. Unmounting and mounting the component make the input lose the focus and the form is not usable anymore.

After much investigating the problem was that react-hot-loader uses proxies in order to create instances of the components, see:
https://github.com/gaearon/react-hot-loader/blob/master/src/patch.dev.js#L106

Using RHL, when a component is created using inst = new Ctor(props, context) by preact we are not getting an instance of Ctor, but an instance of a copy of Ctor created by the proxy.

That makes that inst.constructor !== Ctor so the next time that the component get rendered, preact tries to build it from the VNode and finds that dom._componentConstructor !== vnode.nodeName and it decides to unmount it.

I understand this is not preact's fault, but it's so easy to fix just modifying one line of code of preact, overriding inst.constructor = Ctor for all components:

In component-recycler.js:

if (Ctor.prototype && Ctor.prototype.render) {
  inst = new Ctor(props, context);
  Component.call(inst, props, context);
} else {
  inst = new Component(props, context);
  inst.render = doRender;
}

// Override the constructor even if the instance was created by `new Ctor()`
// This will make preact work ok with react-hot-loader using proxies to create instances
inst.constructor = Ctor;

If I create a PR would you merge it? It's my missing piece to finally make preact and react-hot-module work together!

Thanks for preact, it's great!

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions