Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Render multiple pages in a single component

$
0
0

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.

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>