Props change causes time traveling

[alexseitsinger]

A few weeks ago, RHL was patched to fix some inconsistant state change issues. For a while, this patch fixed my issues, but now it appears the same issue(s) has/have arisen again.

Summary: After changing component props, the component will not update to reflect the changed props. Following this, any future change, including whitespace, causes an update. After that, a future change identical to the first state forces the component to revert to the first version. However, any full page reload does reflect the correct component state (with the right props).

Any suggestions for culprits or how to debug this is appreciated.

[theKashey]

Following this, any future change, including whitespace, causes an update. So RHL failed to force update all required components. Ideally - go from the "problem" components up the tree, changing component by component, until your change would be displayed properly ( I mean - instantly).

Then - please post here source code of component we could not pass thought.

state forces the component to revert to the first version could you elaborate more? Are any change just "delayed" till another change or update, or it's more complicated?

[alexseitsinger]

I am in the process of creating a small reproduction of my issue(s). In the meantime, here is an update...

Currently, I still seem to have an issue with hot updating emotion components that are part of a component tree that is imported using react-imported-component or react-universal-component (hot updates DO work if its imported directly)

ie:

const Container = styled.div`
  font-size: 1.4rem;
`

changing to

const Container = styled.div`
  font-size: 2.0rem;
`

Causes webpack hot module update to work, the hot update payload is correct. However, the component is never updated in the DOM to reflect the font-size change.

Interestingly, when I have my frontend configured appropriately, all hot updates to the component actually happen 1 step later than when they should.

ie:

1. font-size: 1.4rem;
2. change to: 1.6rem -> no DOM update
3. change to 1.7rem -> DOM updates to 1.6rem;
4. change to 1.8rem -> DOM updates to 1.7rem;

Ill make sure to include the important configs in the reproduction, but as a summary Im using:

1. RHL (obviously)
2. react@16.12.0
3. @hot-loader/react-dom@16.11.0
4. ts-loader & babel-loader
5. react-imported-component
6. express w/ webpack-dev-middleware, webpack-hot-middleware, webpack-hot-server-middleware

It's also important to note that manually adding an additional hot(Component) to the emotion component causes it to be hot-reloaded correctly.

[theKashey]

Yep. That's a known bug - some updates are "done" after "hot-update" is done, which is a common case for code splitting.

• However a I was pretty sure that it was fixed in the latest RHL version (runs a secondary update in case of code got lazy loaded - https://github.com/gaearon/react-hot-loader/blob/master/src/hot.dev.js#L69
• As well as in react-imported-component v6 (if hook support (@hot-loader/react-dom) is properly installed)

[sitnarf]

@theKashey Having the same problem with the latest react-hot-loader and @hot-loader/react-dom. Let me know if you need more information.

[theKashey]

@sitnarf - all I need is an example.