Currently, I have 1 component for 1 route. Like:
'/report/:whatTheReportIsOn' -> ReportComponent'/report/:whatTheReportIsOn/info' -> ReportInfoComponent'...'
But the page and switching through tabs is slow. I think this is because the mounting and unmounting of the component consumes quite some time. I came up with an approach to extract the Information from the currentPath and use the same Component for all my "report" paths. Since, I'm new to Typescript and React I can only guess, that this will lead to a huge performance gain, because mounting and unmounting will be skipped.
My new route is defined like this:
'/report/:whatTheReportIsOn/:section?'
I have the following React.FC:
const Report: React.FC = () => { const [currentPath, setCurrentPath] = useState<string>(window.location.pathname) const currentSection: string | null = extractSection(currentPath) return <Page title={"MyPageTitle"}>{renderInfoHeader()} {renderTabMenu()} {renderSection("main")}</Page> function renderInfoHeader(): JSX.Element { return (<div>{"Some Header"}</div> ) } function renderTabMenu(): JSX.Element { return <div>{"Some Menu to switch through the individual sections"}</div> } function renderSection(section: string | null): JSX.Element { if (section === "main") { return <div>{"My Main Section"}</div> } // some more sections later return <></> }}export default MyComponent
My questions are:
- Is this a good approach? What would be a more efficient approach to my problem?
- Is my assumption correct that common elements are quicker rerendered? For example, the InfoHeader should be the same throughout the different sections.
- I also think, Caching is much easier to implement, because the component is not unmounted anymore and I can save the data I retrieve from an endpoint just in the state, and when a user is switching tabs (or sections), if he goes back to a tab I can just load it from the state and not from the endpoint? Is this way of doing it a good approach at all? The highest frequency of data changes are expected to be 1 hour.