I am trying to hard reload my react app onClick and I see a lot of comments on here saying
window.location.reload(); is the solution for this. However, there are a lot of conflicting reports on whether this causes the page to refresh from the cache or if it forces a pull from the server. Ive seen a lot of answers saying if you pass true into the reload action that forces the server fetch. But window.location.reload(); doesnt actually accept any arguments.
Can someone explain a method that works for forcing the page to pull from the server on reload? Or if window.location.reload(); will actually work for this?
Related
I have an app that every time it reroutes, i get a loading state (ranging from 0.1 to sometimes 5 seconds!) and I don't know what to do about it.
The "loading state" is not related to fetching any data from api, but it indicates a page reroute? It is super annoying as a user.
Why does this happen? For example if you use twitter and reroute from /home to /explore, you change pages immediately (yes, you will have loading state, but only for explore page related data) and there is no lagging between page routes, but seamless transition.
Can someone help me please, i just want to call router.push('/somewhere') and render that page with no delay whatsoever.
why is this not happening right now?
is there something I can do about it?
I am newbie to nextjs.
I have no idea why my website will reload periodically?
I know that hot code loading is the feature of nextjs.
Next.js reloads the page when it detects any change saved to disk.
However, How can I know what is the changes which cause the page reloading?
Fast refresh is triggered in development mode for a number of reasons like when an error is fixed, a file is updated, or Next detected out of date state. When stuff is out of sync Next will reload, this sometimes occurs between saves. The link as a complete list of reasons fast refresh is triggered and more detailed explanation.
You can also manually force a page to fast refresh which is helpful when working with code that is invoked on mount.
I have not seen a way to tell what triggered the fast refresh other than an obvious error that was fixed or when a file is updated and saved.
I am working on a React app, and within it there is a page with a lot of graphs and large list component, which takes some time to load (performance dependant). This is fine for now, but the issue comes from the following:
at the first render, there is an API call (App wide as different pages use the same data). A loading spinner shows while the API data is fetched
Once the data is fetched, it is Redux manages the state, and each component just takes what it needs from there (no more loading).
My issue is that when I navigate between pages trough links (react-router), after I click on the link it takes a while for the page to show and the menu to update the current page. None of the state data has changed in that timeframe, so I assumed a PureComponent would prevent re-render, but it doesn't work.
Is there any way to not re-render the page? I would expect to click on a link an immediately see the page that was already loaded before.
Sorry if the question is obvious, I got quite confused while researching this, with cold splitting, lazy loading, etc. which seems to be more about initial load vs. navigation?
If you have a large component dataset to mount and your state does not changes or affects re-renders you could prevent component from unmounting entirely.
If you are using react-router you can rely on setRouteLeaveHook.
If your unmount depends on conditional rendering, it is easier as you can hide your component in various way, including css display:none
There are several ways you can do this
The first one would be to not unmount the component, just hide it with CSS and display: none, but that's a shit solution if you ask me, since you'll still have the component in the DOM.
Another solution that you can use is the one that the guys from the Facebook team used when creating the official website for React. Once you hover over the link to the page, send a request to prefetch the data for that page. So, before the user even clicked, you will have the request already sent.
Another solution you can use is to cache the data. If you are not worried about users with older browsers waiting a bit for the component to load again. You can keep the data for the component in localStorage, then, when you are about to mount the component, check if the data is already in localStorage if it's there, just render the component, if not, just grab the data again.
A combination of the first and the second option would make your component pretty much always instantly render.
This is a very strange issue and wanted to see if anyone else has experienced it.
Sometimes, my react component doesn't find the property of a prop. I say sometimes because sometimes the page renders perfectly fine. Other times, it doesn't find the prop and if I refresh it twice or so, it then starts to work.
I thought the issue could be with the bundled and minified JS file so I switched to the file that WebPack Dev server serves on the fly and I have the same issue.
It's hard to see what's causing the issue because it's intermittent. Why would it fail in one case then once page is refreshed a few times, it starts to work?
I don't think this is important but I'm accessing a property of an object as below:
<MyComponent name={this.props.account.accountHolder.firstName} />
If I debug it when I get the error, I see that firstName is undefined. Refresh the page a few times and everything works fine.
Any idea what could be causing this?
You seem to be battling with race conditions.
Case 1 (everything works out):
Your app is loaded
Your ajax request is sent
Your ajax request is returned and data is inserted into redux
Your apps render method is called
Profit
Case 2:
Your app is loaded
Your ajax request is sent
Your apps render method is called
Kaput!
Your ajax request is returned and data is inserted into redux
So the solution depends somewhat on the state of your reducer and what is your expected behavior, but I would suggest, on your component do some verification that data actually exists, if it doesn't display something else (null, loading spinner, error message, w/e) until the correct prop is actually populated and you can display the child component.
This is a problem I've seen discussed in a few posts around Stack, but I haven't found a clear answer that actually works for me. I expect this to be a common problem, so alternate approaches would be fine too.
Basic concept is that I wish to conditionally display one of two states when a user visits the site. I have an API call to my external server to check if the user's session is active. If so, I can route to the 'home' page, otherwise I route to the 'welcome' page.
The problem is that I don't know how to achieve this.
My initial idea was to create a resolve object in the home state, and resolve the api.isLoggedIn call there first. That would stall the transition so that I could check the state $stateChangeStart event, and then call event.preventDefault if necessary.
The problem with this is that onStateChangeStart is called before the resolve method, so I cannot know whether the user is logged in before the state change.
At the moment I'm thinking that the only way I can achieve this is by presenting an initial state whose controller will check if the user is logged in and then manually call a state change based on the response.
Is there a more idiomatic solution?