Within my React application, I've integrated a ResponsiveDrawer component sourced from material-ui's demo. This component essentially displays a drawer containing a list of menu items, a title bar, and a content frame.
The state of the component includes a variable called mobileOpen.
state = {
mobileOpen: false
};
This variable updates when the user clicks the hamburger icon.
handleDrawerToggle = () => {
this.setState({ mobileOpen: !this.state.mobileOpen });
};
(...)
<Drawer type="temporary" anchor="left" open={this.state.mobileOpen} classes={{paper: classes.drawerPaper}} onRequestClose={this.handleDrawerToggle} ModalProps={{keepMounted: true // Better open performance on mobile.}}>
<div>
<div className={classes.drawerHeader} />
<Divider />
<MenuList onRequestClose={this.handleDrawerToggle} />
</div>
I've also established various routes within the content section of the ResponsiveDrawer:
<main className={classes.content}>
<div className={classes.contentWrapper}>
<Switch>
<Route
exact
path="/currencies"
component={CurrenciesComponent}
/>
<Route
exact
path="/"
component={ProfileComponent}
/>
<Route component={NotFoundComponent} />
</Switch>
</div>
</main>
The CurrenciesComponent in one of the routes is defined as follows:
const CurrenciesComponent = () => (
<Currencies isSignedIn={this.isSignedIn} />
);
Upon clicking the hamburger icon, the state of ResponsiveDrawer changes, causing the CurrenciesComponent to reload unnecessarily due to an API call it contains. To prevent this re-rendering issue, I adjusted the route as shown below:
<Route exact path="/currencies" component={Currencies} />
How can I avoid the re-render while still passing props to the CurrenciesComponent when defining the route?