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
Related
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 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.
I am looking for a way of transitioning between pages with React Router V4.
Specifically I am looking for a way to 1) prevent triggering the navigation to the new page when clicking the Link component; 2) then, start animating out the current page, and when animation is finished and component ready to be unmounted, unmount and trigger history.navigate or history.push.
Is there a common way to do this, or something similar to animate between pages it with React Router V4?
Thanks!
EDIT: as #Tholle points out pages can be transitioned using CSSTransitions, as in https://reacttraining.com/react-router/web/example/animated-transitions. I know that, and I've read many articles on different ways of doing it. The most common stategy is to overlap both current and incoming page in fixed position, with the latter in opacity: 0, and transition between them with CSS using the timings provided by the CSS transition component. But the lack of control over the life cicle of the components surprise me, so I'm looking for a way to transitioning between pages with better control over the life cicle of the page components: componentWillMount, componentDidMount, componentWillUnmount and componentDidUnmount.
Scenario:
I have a React component which shows up in one of the tabs on my website. Navigating to another tab in the same website unmounts the component and navigating back to the original tab renders the component again.
Problem:
The problem I'm facing is that the older React component still shows up in the React developer tools console and everytime I navigate back to the original tab, the number of components shown there increase by one.
My question is: Are the components not getting deleted and that there is another way to delete the component which I'm not doing or it is the behavior of React developer tools console to show earlier components?
I'll suggest to check the actual DOM, not what you see in the devtools. It is possible that there is a bug in devtools. The way of how React's devtools work is a little bit tricky. The communication between what happens in the page and the actual devtools ui depends on couple of factors. There is a content script, background script a bridge that they wrote and so on. If you see the components number growing in the DOM then the problem is not in the devtools but in your app.
I'm creating a math quiz app using react-native. I wish to know how to reload all the components, upon clicking the right answer, so that a new question is loaded.
You're looking the wrong way. Reloading all the components will just render the same thing. What you are looking for is more a thing like Redux.
It will allow you to have a state container where all your data live, allowing to store the question number and update it – then components will be rendered to display the new one.
Please take a look at redux documentation, then at react-redux one.
So you would create a dispatch method, e.g. setQuestion(...), which is called when you press a button that will change the question number. The button would be a presentational component.
Then, you would have a component that wrap the whole question screen that will be updated because it was bound with redux store. It is a container component.
See more about presentational and container component here.
If you still want to refresh your app, and don't want a predictive state, you could call app.forceUpdate() where app would be instance of the top component.