React.lazy is not working with react-hot-loader

[ffan0811]

Description

I'm trying to use lazy and suspense from react with react-hot-loader.
react-hot-loader works fine without lazy feature and visa versa. However, If I use the lazy feature with react-hot-loader, the component doesn't render immediately.
the flow is like

1. There's an element <p>this is test</p> and I edited it to <p>this is testt</p> in component A and saved the file.
2. I can see the logs from HMR. ([HMR] App is up to date.) but the view is still showing "this is test".
3. I edited the element to <p>this is testt!</p> from <p>this is testt</p> and saved the file.
4. logs totally work but the view is showing "this is testt" (which is supposed to show me earlier when i saved the file at the beginning)

What am I doing wrong??

Environment

React Hot Loader version: ^4.6.3

1. node -v: 8.14.0
2. npm -v: 6.4.1
3. yarn -v: 1.12.3 (I'm using yarn)

./index.js
const render = Component =>
	ReactDOM.render(
		<Provider store={store}>
			<I18nextProvider i18n={i18n}>
				<App/>
			</I18nextProvider>
		</Provider>,
		document.getElementById('root'));

render(App);

if (module.hot) module.hot.accept('pages/App',() => render(App));

./App.js
const HomePage = lazy(() => import("pages/HomePage"));
const DynamicPage = lazy(() => import("pages/DynamicPage"));
const NoMatchPage = lazy(() => import("pages/NoMatchPage"));

<Router>
        <Suspense fallback={<div>loading...</div>}>
             <Switch>
                  <Route exact path="/" render={() => <HomePage />} />
                  <Route path="/dynamic" render={() => <DynamicPage />} />
                  <Route render={() => <NoMatchPage />} />
             </Switch>
        </Suspense>
</Router>

//console : When I save files, the log says It is up to date but It isn't re-rendering the component.
[WDS] App updated. Recompiling...
client:224 [WDS] App hot update...
log.js:24 [HMR] Checking for updates on the server...
log.js:24 [HMR] Updated modules:
log.js:24 [HMR]  - ./src/pages/HomePage/HomePage.js
log.js:24 [HMR]  - ./src/pages/HomePage/index.js
log.js:24 [HMR]  - ./src/pages/App.js
log.js:24 [HMR] App is up to date.

[theKashey]

This is a known issue.
In short inside React there is something like double buffering, - alternate in React terms. React-Hot-Loader could update the current view, but not the alternate.
After the update you will see an alternate, and after another update - the updated type. It will be always one update behind.

How to fix today

Use webpack-loader to patch react-dom or hot-loader/react-dom to give RHL access to React internals, and ability to monkey patch everything it needs.

I will update RHL to perform the same action (update alternate) simultaneously with force update, and that would solve the issue without need of react-dom patches.

[ffan0811]

Oh I just checked the README. my bad. and thank you for the reply! :)

[theKashey]

I'll reopen issue as long as it's possible to fix it better than today. 🤞