document click listener function executed twice: before and AFTER component rendered. about react-hot-loader HOT 4 CLOSED

Ok I recently discovered something. It seems that adding e.stopPropagation to the button handler avoids the native event from being executed which lead me to the point in which it seem that the bridge between synthetic event bubbling to native events is being blocked by the component rendering execution.

Adding e.stopPropagation solves the problem but I don't like to have this side effects.

from react-hot-loader.

Any clue on whats going on? @gaearon 🙏

Thanks in advance.

from react-hot-loader.

Neither @gaearon nor @theKashey are actively looking at React-Hot-Loader anymore. It was deprecated a year ago and nowadays you are expected to use "natively supported" Fast Refresh, not "hacky" RHL

But there are some clues. I am not sure that your problem is related to RHL, but there are few issues with "arrow methods" as well as with life cycle ones, for example you might not be able to remove this handler, as this.handleOutsideClick can point to another "version" of it.

As well as it can be added before "control" will be returned to the browser (pretty sure it's the case), and this has nothing with RHL.

The fix is simple - use useEffect, as it will be executed "later". Note that componentDidMount is equal to useLayoutEffect, and you can run into the problem I've described above.

If you are not able to convert this one to a functional component or defer this logic to another component - try wrapping addEventListener with some cancelable setTimeout.

In any case, converting class-based one to the functional-based one will:

• fix the problem (useEffect)
• fix the problem (connect addEventListener and removeEventListener, preventing the first issue I've described above)
• fix the problem (FastRefresh)

from react-hot-loader.

Thank you for taking your time on replying me. I'll definetivelly try it!

from react-hot-loader.