How to avoid flicker with ion-tabs and isVisible state?

I’m using tabs in my Ionic React app. I’m trying to minimize re-renders of one of my tabs because the renders are expensive, so I did this:

  const [isVisible, setIsVisible] = useState(true);

  useIonViewWillEnter(() => {
    setIsVisible(true);
  });

  useIonViewWillLeave(() => {
    setIsVisible(false);
  });

  if (!isVisible) {
    return null;
  }

This dramatically reduces the re-renders (great!), but the problem is that it introduces a small flicker when switching to the tab. I assume the flicker is because I am returning null initially… what can I do to return something that will eliminate the flicker but not cause a component re-render?

I tried adding a skeleton page like this:

import React from 'react';
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from '@ionic/react';
import { Trans } from '@lingui/macro';

const PageInvisible: React.VFC = () => (
  <IonPage>
    <IonHeader>
      <IonToolbar>
        <IonTitle><Trans id="page.title">Generic Title</Trans></IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent />
  </IonPage>
);

export default PageInvisible;

And then modifying my tab like:

if (!isVisible) {
return
}

However, when I do this, when I click to go to the tab with <PageInvisible />, Ionic re-renders the current tab, breaking my app. So it seems I have to return null to get this to work, but null results in flicker.

1 post - 1 participant

Read full topic