Page still loading when componentDidMount finished with its own work, is there any way to detect when all my components, images & resources are fully loaded every time I navigate to different pages on my app?
As far as I was checking this around the internet, it seems imposible.
componentDidMount doesn't work
adding an eventListener for "window load" only works once
React-router doesn't have any feature that could help with this.
I am trying to build an App that takes advantage of the SSG functionality of next js and shows multiple Page components at the same time. Each of the components should be static and come with their own data.
The problem is that I don't know how to persist the first Page component when the route for the second Page component is called. Putting it into state works, but according to the react docs this is not a good idea. Of course I could simply get the data out of the props for the Pages and make the client render the component but this solution doesn't exactly take advante of SSG.
I made a codesandbox that shows what I'm trying to achieve by putting the pages into the state of the Layout component:
https://codesandbox.io/s/elegant-lichterman-v70zl
Is there a way to achieve what I'm trying to do whithout using state?
Or is using state in this way a feasible exception?
Or am I on the wrong track entirely?
Any help would be highly appreciated!
I am sorry if the title of my question does not make sense or the whole question :)
How to achieve this behaviour in npmjs.com when navigating in React's different components? go to npmjs.com, search for react, click on next page, the current page does not unmount, instead they show a progress bar and wait for the next page to get ready and then show it.
Is it possible to implement this in navigating between different components using react-router-dom?
Thanks
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.
In older versions I could use setRouteLeaveHook within my component.
For example (SO): Detecting user leaving page
With react router v4 the logic has changed away from injecting the router itself into the components and I only found the following function on router v4:
BrowserRouter. getUserConfirmation
I am a little bit confused, why I should link the confirm behavior with the Router itself and not with a specific component!?
How can I place a confirm window, when leaving my component (linked to my current route), while being in a certain state? This seems to be not supported by the function above.
I think the Prompt component is what you're looking for. Just render it in the component you want to confirm navigation form, i.e. the same component you render in your <Route>.
react-router-navigation-prompt also does what you want: it is a more powerful <Prompt />.