React Material UI - Tabs - How to disable lazy loading of tabs? - reactjs

Question

I am creating some react tabs based off of the example shown here for Material UI: https://material-ui.com/components/tabs/.
The problem I am encountering is that my tabs are lazy loading the linegraph components instead of performing all the queries on initial page load. Does anyone have some suggestions of where I can optimize this to make each tab load immediately on page load?
function TabPanel(props) {
const { children, value, index} = props;
return (
<Typography>
{value === index && <Box p={3}>{children}</Box>}
</Typography>
);
}
class SimpleTabs extends Component {
constructor(props) {
super(props)
console.log(props.color)
this.state = {
value: 0
};
}
handleChange = (event, newValue) => {
this.setState({value: newValue});
};
render() {
return (
<div>
<AppBar position="static">
<Tabs value={this.state.value} onChange={this.handleChange}>
<Tab label="Item One"/>
<Tab label="Item Two"/>
<Tab label="Item Three"/>
</Tabs>
</AppBar>
<TabPanel value={this.state.value} index={0}>
<LineGraph className={styles.graphBox} name={"Guest Count"} url={'http://127.0.0.1:5000/***/***'} initialFilterData={this.props.initialFilterData} filterData={this.props.filterData}/>
</TabPanel>
<TabPanel value={this.state.value} index={1}>
<LineGraph className={styles.graphBox} name={"Total Sales"} url={'http://127.0.0.1:5000/***/***'} initialFilterData={this.props.initialFilterData} filterData={this.props.filterData}/>
</TabPanel>
<TabPanel value={this.state.value} index={2}>
<LineGraph className={styles.graphBox} name={"Avg Check Size"} url={'http://127.0.0.1:5000/***/***'} initialFilterData={this.props.initialFilterData} filterData={this.props.filterData}/>
</TabPanel>
</div>
)}
}
export default SimpleTabs;

Answer 1

Add hidden={value !== index} to the Typography in TabPanel and remove the value === index && condition inside the Typography so that the children of all the tab panels are rendered immediately but hidden (except for the currently selected one).
Example:
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<Typography
component="div"
role="tabpanel"
hidden={value !== index}
{...other}
>
<Box p={3}>{children}</Box>
</Typography>
);
}