IonApp double rendering

When installing the starter Ionic react app (example with tabs), IonApp renders twice. I put a console.log(‘Tab1 called’) just before the return statement, it will produce a double output of “Tab1 called” in the console when visiting /tab1.

Is this the intended behavior? What is the purpose?


1 Like

Hi, I noticed the same behaviour. I’m using the menu example with Ionic 5. If I put a console.log() in any page, it results in a double output in the console.

I also tried calling a function for the name of the page with the same result. This is my page:

const HomePage: React.FC<RouteComponentProps<{ pageName: string }>> = ({ match }) => {
	const test = () => {
		console.log('Test'); // ---> Executed twice
		return match.params.pageName;

	return (
					<IonButtons slot="start">
						<IonMenuButton />

			<IonContent> of the page </IonContent>

export default HomePage;

Is this OK?



I suspect that this is because of the IonReactRouter and the IonPage.
If you remove all the routers and tabs from the sample app, then it should only render once.
Unfortunately, I have not found a good solution yet.

This seems to be an issue with IonRouterOutlet.

I’m also getting double rendering on every component once it’s been mounted. As @GuillermoDotAt said, you can easily duplicate this by using the starter ionic react app. Using the side menu starter app, the component double renders each time you click a menu nav.

In my own app, every component will double render every time I change routes as long as they’ve been mounted. For example, once I’ve navigated to RouteA, RouteA is rendering twice every time I change routes.

By changing <IonRouterOutlet> for <Switch>, the components are only rendered once as expected, but you lose access to navigation animations and the ionSplitPane, so I’d rather not do that!

Yes, I also changed <IonRouterOutlet> to <Switch>.
While Switch does not have these animations, it renders much faster and does not suffer from the double renderings.


You also lose access to things like the back button appearing if you go a level deeper than your current route, which is very important. React handles rendering very well and the double render wont cause a huge performance hit so you might as well stick with IonRouterOutlet for now. I am anyway!


So i did some work around on this and it works fine for me. So what i did was, on component that has the ion-page, i simply included a state “safeToView” and used that to toggle the visibility of the page on ionViewDidEnter(), setting that state to true inside a setTimeout will cause it to trigger after the initial render and the double render wont be noticeable.

  state = {
    safeToView: false,

  ionViewDidEnter = () => {
    setTimeout(() => {
      this.setState({ safeToView: true });

  render() {
    const { safeToView } = this.state;

    return (
          className={`sv-mobile-landing-page ${
            safeToView ? "safe-to-view" : ""

This is my css:

.sv-mobile-landing-page {
  visibility: hidden;

  &.safe-to-view {
    visibility: visible;