Local state not preserved
See original GitHub issueSo, 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:
- 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 ifoptimization.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? - 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.
- 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:
- Created 2 years ago
- Comments:11 (6 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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 😄
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.