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 why this 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.
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
Top comments (0)