ionic react lifecycle

will enter event fired

did enter event fired

page opens

switch page, will leave event fired

did leave event fired

page switches

//tab1.tsx

import React, { useState } from 'react';

import {

  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,

  IonAlert, IonButton, IonCard, IonCardHeader,

  IonCardSubtitle, IonCardTitle, IonCardContent,

  IonItem, IonIcon, IonLabel, IonBadge, IonList,

  IonItemDivider, IonCheckbox, IonChip, IonAvatar,

  IonGrid, IonRow, IonCol, IonInput, IonToggle,

  IonModal, IonRefresher, IonRefresherContent,

  IonTextarea, IonSelect, IonListHeader,

  IonSelectOption, IonButtons, IonBackButton,

  IonMenuButton, IonSegment, IonSearchbar,

  IonSegmentButton, IonFooter, IonText, IonToast,

  useIonViewDidEnter, useIonViewDidLeave,

  useIonViewWillEnter, useIonViewWillLeave

} from '@ionic/react';

import ExploreContainer from '../components/ExploreContainer';

import './Tab1.css';

import {

  person

} from 'ionicons/icons';

import { RefresherEventDetail } from '@ionic/core';

import axios from 'axios'

const Tab1: React.FC = () => {

  useIonViewDidEnter(() => {

    alert('Did enter event fired')

  });

  useIonViewDidLeave(() => {

    alert('Did leave event fired');

  });

  useIonViewWillEnter(() => {

    alert('Will enter event fired')

  });

  useIonViewWillLeave(() => {

    alert('Will leave event fired');

  });

  return (

    <IonPage>

      <IonHeader>

        <IonToolbar>

          <IonTitle>Ionic life cycle Examples</IonTitle>

        </IonToolbar>

      </IonHeader>

      <IonContent>

      </IonContent>

    </IonPage>

  );

};

export default Tab1;

reference:
https://ionicframework.com/docs/react/lifecycle