Hey guys, i have been stuck on a problem since last 8 hrs, and couldn’t find a solution. As i have already posted the question on stackoverflow with the code snippets, its better to go there and read the question in full. Though i will summarise the problem here. I have a page with Header, Footer, Sidebar and Main. The sidebar has multiple static links so that when i click on them only main should change and not the other 3 components, Right now, sidebar gets mounted every time unnecessarily. Full detailed explanation is provided in the link. ANY HELP IS HIGHLY APPRECIATED.
Hello!
Is it possible to restructure your app? You need to, somehow, remove the sidebar from the rendering loop, but it’s hard to tell you exactly what to do since it’s your design 
.
Thanks Sir, i know i need to restructure the code but is there a way around it where i can use shouldcomponentupdate in sidebar because right now i dont have the time to think how to fix the structure
For a quick fix (that doesn’t involve new structure), I’d use shouldComponentUpdate or even faster, just use Pure Components.
Here’s the syntax for Pure Components:
import React, { PureComponent } from 'react';
export default class ComponentName extends React.PureComponent {
// same stuff as in your standard component
}
Do i need to check the condition for nextprops in Pure Component? Lemme revert back here right after i implement my sidebar as you asked.
Edit: I just modified my sidebar.js to extend Purecomponent but it isn’t giving the desired output as render of Sidebar is called when i click on a different link.
Yeah, Sidebar will rerender because if you’re using NavLinks, they change the active attribute depending on what page you’re visiting. You could perhaps disable that but that would make your page less accessible.