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.
Related
I am new so If I changes something like css properties(I am using tailwind) or something after I save all changes localhost:3000 is reloading page automatically. I thought it is not big problem due to losing some state changes after reloading page.
Every time I update my website, the users need to do a Hard refresh to see the last changes
I search this issue but no result, tried added Tags in my Html file to avoid save cache in my app, the unregister function from the serviceWoker and the library of react-clean-cache but none seem to work
Is there a way to force Browser load my page from scratch ?
React v16.13.1
Node v13.13.0
You can use useHistory from react-router-dom. And then history.go(0) to force the refresh actual page.
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!
Issue
Gatsby hot reloading is not working when modifying CSS properties
from Components that lives in generated .MDX pages.
Goal
I want the ability to review changes made to Components using hot
reloading.
I started playing around with MDX and Gatsby but, I am finding frustrating having to restart the server every time I want to preview changes made to the design of Components. Is there any workaround this issue?
Thank you in advance.
I'm using a custom tool similar to react-snap to create a snapshot of my app at build time, as recommended in the create-react-app docs. This generates a static server-rendered version, which I can deploy behind nginx without running react on the server. This works fine.
I'm also using code-splitting to lazily load some components to reduce the initial JS payload. (I use react-loadable, but I'm willing to change that if needed.) It works fine when creating the snapshot, and the HTML is generated correctly, which the user receives correctly, and everything is displayed fully server-rendered without even downloading any JS yet. This is great.
However, during rehydration on the client, the import(...) call for the async loaded component hasn't yet been fired. Meanwhile, the DOM already has the stuff that has to be rendered, from the snapshot.
In this scenario, is there a way to prevent the initial render of a component during mounting, since I already have the content in the DOM?
Also, is it possible to have react's hydration logic run after the import is complete, so that I can prevent any flicker even after the import is complete?
If it matters, the lazy-loaded components are infrequently used routes, managed by react-router.