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.

1 Like

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!

1 Like