React-hot-loader: [Material-UI v4]Regression in react-hot-loader 4.9.0

[andrew-w-ross]

Description

What you are reporting: Styling is lost on update using [email protected] works in 4.8.8

Expected behavior

What you think should happen:
For styling to still be applied on update.

Actual behavior

What actually happens:
All styling is removed.

Environment

React Hot Loader version: 4.9.0

Run these commands in the project folder and fill in their results:

1. node -v: 12.2.0
2. npm -v: 6.9.0

Then, specify:

1. Operating system: Ubuntu 19.04
2. Browser and version: Chrome 74.0.3729.169

Reproducible Demo

https://github.com/andrew-w-ross/react-hot-loader-regression

Instructions on how to reproduce the issue are in the project.

[theKashey]

Temporal workaround - disable hooks reload

import { setConfig } from 'react-hot-loader'

setConfig({
  reloadHooks: false
})

[theKashey]

Look like this is a specific Material UI behaviour which clashes with the assumptions I've made:

• RHL adds one more dep to useEffect
• MUI uses useSynchronousEffect, which manually __applies__ the effect, and uses useEffect to remove it.
• RHL triggers hooks removal, but can not trigger hook creation.
• styles are lost.

Hopefully this is a single, and quite unusual point of failure.

[theKashey]

@oliviertassinari - 🙏

[oliviertassinari]

Thanks for sharing

[ThomasJanUta]

One more note: If you use the gatsby example from the MUI project: You need to paste

import { setConfig } from 'react-hot-loader'

setConfig({
  reloadHooks: false
})

on top of the function definition of your root layout i.e. the top layout of the plugin.

[theKashey]

MUI going to solve it _tomorrow_.

[oliviertassinari]

It's fixed in https://github.com/mui-org/material-ui/pull/16195 and will be soon released in Material-UI v4.1.1.

[andrew-w-ross]

@oliviertassinari @theKashey You guys rock, thanks.

[theKashey]

And it's done!