Page does not re-render on Tabs navigation

Ionic Framework Ionic React
#1

When I navigate for the 1st time to the AddCustomer tab - I can see the alert; the subsequent times - no alert. It means that the AddCustomer component is rendered only once.
Is that by design?
How can that be fixed?
Thanks

App.tsx

  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Redirect exact from="/" to="/add-customer" />

          <Route exact path="/customer-list">
            <CustomerList />
          </Route>

          <Route exact path="/add-customer">
            <AddCustomer  />
          </Route>
        </IonRouterOutlet>

        <IonTabBar slot="bottom">
          <IonTabButton tab="customer-list" href="/customer-list">
            <IonIcon icon={list} />
            <IonLabel>Customers</IonLabel>
          </IonTabButton>

          <IonTabButton tab="add-customer" href="/add-customer">
            <IonIcon icon={add} />
            <IonLabel>Add customer</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

CustomerList.tsx

const CustomerList: React.FC = () => {
  return (
    <IonPage>
      <IonContent fullscreen>
        <div>foo</div>
      </IonContent>
    </IonPage>
  );
};

AddCustomer.tsx

const AddCustomer: React.FC = () => {
  useEffect(() => {
     alert(123);
  }, []);

  return (
    <IonPage>
      <IonContent>
       <div>bar</div>
      </IonContent>
    </IonPage>
  );
};
#2

That is by design. You need to use Ionic’s Lifecycle events if you want something to be run each time the component is navigated to - React Ionic Lifecycle events.

1 Like
#3

also the way that you are using useEffect the alert will only be displayed once…

#4

No. you’re confusing it with state change.

#5

[] means the effect doesn’t use any value that participates in React data flow, and is for that reason safe to apply once.

A Complete Guide to useEffect — Overreacted

#6

Since now I’ll be using Ionic lifecycle events - useEffect is void.
Appreciate the comment, though :slight_smile: