Swipe through components with big data sets (React) - reactjs

Question

I'm building a React app that takes in a lot of data from temperature sensors at several different places and displays the data with chart.js.
I have made one component that fetch data from one place and that component is called from App.js, so now I could copy this component / or fetch data from another place if I implement it that way.
Next step is to find a way to swipe through these components. I don't know what to use or how I would go about to solve this, so I'm looking for ideas on how to solve this.
I have tried using react-swipeable-views. Code is provided in this post. This seems to be a simple solution, but I'm not sure if it's a good idea to do like this. I guess it would be quite heavy with large data sets? If I understand the way React works it would pull in data from all components to a browser and then hide it until it's showed?
I have also looked at this article: https://coursework.vschool.io/react-transitions-with-react-transition-group/
Here react-transition-group is used, but I'm not sure on how to implement the swipe part here since that is not discussed in the article.
Any ideas on how to solve this?
import React, {Component} from 'react';
import Test from './Test';
import SwipeableViews from 'react-swipeable-views';
const styles = {
slide: {
padding: 15,
minHeight: 800,
color: '#fff',
},
slide1: {
background: '#FEA900',
},
slide2: {
background: '#B3DC4A',
},
slide3: {
background: '#6AC0FF',
},
};
class App extends React.Component{
constructor(){
super();
this.state={
foo: 'bar'
}
}
}
render(){
return(
<div className="App">
<SwipeableViews enableMouseEvents>
<div style={Object.assign({}, styles.slide, styles.slide1)}>
slide n°1
<Test /> // <-- This would be a component with large data sets
</div>
<div style={Object.assign({}, styles.slide, styles.slide2)}>
slide n°2
</div>
<div style={Object.assign({}, styles.slide, styles.slide3)}>
slide n°3
</div>
</SwipeableViews>
</div>
)
}
export default App;

Answer 1

I have not used it before but looking at the docs, using react-swipeable-views should be fine, since it "quickly renders the first slide, then lazy-loads the others." (from https://github.com/oliviertassinari/react-swipeable-views). Furthermore you can customize how many slides before and after the currently displayed one are being rendered (see https://react-swipeable-views.com/api/api/#virtualize).
Also, it might be a good idea, to catch up on some react concepts (https://reactjs.org/docs/introducing-jsx.html). React does not "hide" any components, it only renders the ones you choose to the DOM and updates what is necessary to get the DOM to reflect your state. So for example, if you have multiple pages (p1, p2, p3), each rendering one component (c1, c2, c3), while being on page p1, only the component c1 would be rendered to the DOM.