I have a react/redux app and when file changes and I hit save it refreshes the page and clears
all redux data.I know t that I can persist redux data to localstorage. What I would love to know
is that is it the default behaviour of react/node server to refresh the page when file changes? If not how can I prevent it?
Is it a default behaviour? : YES, it is.
This is known as live-reloading where a change in your file refreshes your local server and restarts the app setting all state to initial ones.
But the problem as you mentioned is that the state of the app is lost.
There is another concept called hot-reloading which prevents it. Hot reloading will just replace the modules which have changed while the app is running. This won't cause a total refresh of the app. It will just update the page with the changes without a reload, and so will maintain the state of the app. However, the state of the component,i.e, the react state isn't maintained.
Now, when you create a react project using CRA, the hot reload feature is built in. You can try it by running your app and changing some css. You will notice that the app doesn't refresh but the changes are applied!!
However, if you try doing this in a JSX file, the entire app changes. This is because there are some changes that needs to be done to enable hot reloading in a JSX file.
Go to the index.js and write this line of code:
if (module.hot && process.env.NODE_ENV !== 'production') {
module.hot.accept();
}
If you go and make a change to your JSX file now, you will see that the updates are applied without refresh.
BUT, the react state aren't maintained. There is a library called the react-hot-loader, which can help you in maintaining the react state too.Try it out!
Related
I'm having an issue with my React app where as soon as I edit code and hit save on my IDE, the entire app refreshes on the browser- triggering all of the API calls. I could be making a minor text change and the entire project will essentially reload.
I've tried messing around with FAST_REFRESH=false in the env file, but it's not working. I've also confirmed that there are no instances of window.location.reload() within the codebase. The project also does not include any custom webpacks or bundles.
Ideally, I want the project to update the necessary components on edits, without reloading the entire project.
When I run my react app in the browser, everything works fine. But when I edit a file and it gets saved, I can still see the whole app but when I try to interact with it, it doesnt work, I did inspect element and saw that the body that does not contain anything. Yet the content is visible?
Any solutions?
Note , when I reload the page everything is working fine, but its annoying to have to reload the page everytime.
Next JS is based on Reactjs and this might be helpful for you:
Limitations
Fast Refresh tries to preserve local React state in the component
you're editing, but only if it's safe to do so. Here's a few reasons
why you might see local state being reset on every edit to a file:
Local state is not preserved for class components (only function components and Hooks preserve state).
The file you're editing might have other exports in addition to a React component.
Sometimes, a file would export the result of calling a higher-order component like HOC(WrappedComponent). If the returned
component is a class, its state will be reset.
Anonymous arrow functions like export default () => ; cause Fast Refresh to not preserve local component state. For large
codebases you can use our name-default-component codemod.
As more of your codebase moves to function components and Hooks, you
can expect state to be preserved in more cases.
You can read more about FastRefresh from the documentation.
I’m making a simple app with react-routing component.When user enter in /config path, it open a configuration page where he can choose element from select.
After this, user save data and the application set state of main component correctly (App.js). Then i make a “view change” using history to return in home (/ path).
The problem is : if user click on second time in /config routes, it lose all previous change made on DOM and it seems to be a new istance.
How i can preserve user interaction after first change? I cannot understand if i need to make a state inside this (Config.js) or there are an alternative solution.
Thanks for all
If you have an app level configuration which should be preserved between renders/navigation you should consider using some sort of a state management like Redux or you should store your config inside sessionStorage/localStorage (sessionStorage keeps track only while your browser tab is active = not closed. localStorage saves for the future when user closes and reopens your app).
Learn more about Web Storage API on how to use sessionStorage and localStorage.
NOTE: When you navigate away from your component, it gets unmounted which means that the component's state is destroyed/trashed. That's probably the situation you're facing now with your project.
You need to store the data/state/config somewhere. If it's just a few things (nothing heavy or complex), you can use localStorage (it saves the data between sessions, doesn't matter if you close tab and open it again)... But if you need to have a greater control over the app's state you should consider diving into Redux Store.
Have in mind that by default redux doesn't support data persistence so you'll need to plug-in Redux Persist package to achieve that (it's like saving in localStorage, but now the whole Redux (with all the states) will be saved between sessions)
I am not sure what you mean by
lose all previous change made on DOM
Where do you store these changes made and could you not check for this state and render the contents of the /config component or even the component itself depending on whether or not the changes to the state have been made?
I'm new to react, and I'm wondering if there is a way to add local state changes to the browser history to allow users to use back browser button to navigate back. I know this could cause problems sometimes, but I'll do it just in some specific and managed cases.
In my real application I'm using react-router v4 and experimented with history.push(location,state) but it didn't worked out
Here is an example application on codesandbox: https://codesandbox.io/s/9oz34n30j4
In this application I'd like the user to be able to browse back with the browser button between status changes.
Is that possible in any way?
Thanks
Anytime I make changes in a CSS file or components, etc, my entire app loses state.
From what I've read, hot loading should be the default in Next.js.
What could be going wrong?