Ionic React : Switching between tabs is very slow since I added Ionic

Ionic Framework Ionic React
1

I just added Ionic to my existing React app and, then, impleted the @ionic/react-router.

But after to modify my navigation tabs, I notice a BIG difference of delay when I switch between two tabs :

  • 0.5 seconds with ReactRouter :white_check_mark:
  • 2 seconds with IonicReactRouter :sob: 
<IonTabs>
  <IonRouterOutlet animated={false}>      
    <Redirect exact path="/tab" to="/tab/home" />
    <Route exact path={`/tab/home`} render={() => <Home />} />
    <Route exact path={`/tab/user`} render={() => <User />} />
    <Route exact path={`/tab/ranking`} render={() => <Ranking />} />
    <Route exact path={`/tab/settings`} render={() => <Settings />} />
  </IonRouterOutlet>

<IonTabBar slot="bottom">
  <IonTabButton tab="home" href="/tab/home">
    <IonIcon className='icon icon-home' />
    <IonLabel>Home</IonLabel>
  </IonTabButton>
  <IonTabButton tab="user" href={`/tab/user`}>
    <IonIcon className='icon icon-team' />
    <IonLabel>Club</IonLabel>
  </IonTabButton>
  <IonTabButton tab="ranking" href={`/tab/ranking`}>
    <IonIcon className='icon icon-ribbon' />
    <IonLabel>Phases</IonLabel>
  </IonTabButton>
  <IonTabButton tab="settings" href={`/tab/settings`}>
    <IonIcon className='icon icon-ranking' />
    <IonLabel>Ranking</IonLabel>
  </IonTabButton>
</IonTabBar>

I notice, if I remove all content from my tabs, the “switch time” is Ok, but I don’t want empty tabs :confused:

<IonRouterOutlet >      
  <Route exact path={`/tab/home`} render={() => <IonPage>Home is empty</IonPage>} />
  ...

Do I made a mistake ?

PS : Of course I can optimize my tab content, but this is not explains why it is more slow than the react BrowserRouter

2

Did you ever figure out this issue? I’ve been dealing with the same problem and it’s really surprising how even a simple app can have perf. issues :confused: