question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Local state not preserved

See original GitHub issue

So, I’ve been having a devil of a time trying to get local state to be preserved when hot reloading modules. I started out with react-hot-loader without success. And now I’m trying react-refresh. I converted my app to use functional component syntax and reviewed the troubleshooting guide. The part that talks about splitting chunks caught my attention as a possible cause. But I have 3 questions that all relate to preservation of state:

  1. I have a fairly exotic webpack config with multiple entry points where each entry point is a different app. I expect optimization.runtimeChunk.name = 'runtime-common' to be acceptable. But I’m not sure if optimization.splitChunks.chunks = 'all' is acceptable. The troubleshooting guide just mentions explicitly creating an entry point for vendors. But I’m letting splitChunks dynamically create that bundle. Does that need to change?
  2. Also, since my development HTML page embeds all bundles into the same page, I’ve written some code that enables switching between apps. I’ve manually configured “module.hot.accept” to allow me to maintain a reference to the latest and greatest app across hot reloads and rerender appropriately. Do you expect this to conflict with react-refresh and, if so, how would I make them work together? Basically, I don’t need to manually rerender the app using ReactDOM when a hot reload occurs if ‘react-refresh’ handles that, but I need a reference to the updated app component in the event I switch to a different app and back.
  3. Finally, I’m using a 3rd-party component library that uses class components. Do you expect any issues where class components (as a parent or child) to cause functional components to fail to preserve state?

I’m using React 16.9 and webpack 4. If you need any further details, just let me know. I’d rather not create a whole new Git repository to make a publicly accessible reproduction, but will if I must.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:11 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
pmmmwhcommented, Jun 15, 2021

I’ll be closing this issue as the original issue was resolved - feel free to open a new one if there are any new questions/reproductions of issues 😄

0reactions
pmmmwhcommented, Jun 9, 2021

Can you create a reproduction? You have a different problem than the OP and is likely due to misconfiguration (e.g. something causing components to not register properly, or react-refresh/babel not transforming correctly).

Depending on how big your project and how complex it is, this plugin would take time as we touches all your files basically.

Read more comments on GitHub >

github_iconTop Results From Across the Web

5 Methods to Persisting State Between Page Reloads in React
One of the straightforward options is to use localStorage in the browser to persist the state. Let's take a look at an example....
Read more >
Preserving and Resetting State - React Docs
The chats would not get removed from the tree, so their local state would be preserved. This solution works great for simple UIs....
Read more >
React redux store's state not saved - Stack Overflow
So I was just unaware of the losing state fact upon refresh. Comment from original post said it all, here they are for...
Read more >
How to Save State to LocalStorage & Persist on Refresh with ...
Step 3: Getting a stored value from localStorage and loading it into React state. Finally to make sure our state is persisted any...
Read more >
Persisting your React state in 9 lines - DEV Community ‍ ‍
Clever, right? Every time we update our state, we should update what's stored in our local storage. If the key changes, we'd want...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found