IonApp double rendering

Ionic Framework Ionic React
1

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?

Thanks,

2 Likes
2

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 (
		<IonPage>
			<IonHeader>
				<IonToolbar>
					<IonButtons slot="start">
						<IonMenuButton />
					</IonButtons>
					<IonTitle>{test()}</IonTitle>
				</IonToolbar>
			</IonHeader>

			<IonContent>...rest of the page </IonContent>
		</IonPage>
	);
};

export default HomePage;

Is this OK?
Thanks.

2 Likes
3

Hi,

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.

4

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!

5

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
6

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
7

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 (
        <IonPage
          className={`sv-mobile-landing-page ${
            safeToView ? "safe-to-view" : ""
          }`}
        ></IonPage>)

This is my css:

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

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