Ionic React Tutorial: One Way To Optimize Page Renders In Ionic React App with Tabs

Video Tutorial and Source Code

We show an approach to managing page renders in an Ionic Framework Tab Application. You can see the side effects in an application that has multiple tabs, but in general, it happens in all apps… rendering of pages that are not visible.

The documentation explains what is happening

From Ionic React Documentation:
“For instance, componentDidMount fires the first time a page is displayed, but if you navigate away from the page
“Ionic might keep the page around in the DOM”, and a subsequent visit to the page might not call componentDidMount again. This scenario is the main reason the Ionic lifecycle methods exist, to still give you a way to call logic when views enter and exit when the native framework’s events might not fire.”

But the Ionic Team has also provided a solution which is using the lifecycle methods.

See React LifeCycle Methods Documentation

In this example video, we use the LifeCycle Methods to control the rendering of the page when is it not visible to minimize unnecessary operations which could impact the performance of your application.

CODESANDBOX

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store