Page does not re-render on Tabs navigation

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?


          <Redirect exact from="/" to="/add-customer" />

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

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

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

          <IonTabButton tab="add-customer" href="/add-customer">
            <IonIcon icon={add} />
            <IonLabel>Add customer</IonLabel>


const CustomerList: React.FC = () => {
  return (
      <IonContent fullscreen>


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

  return (

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

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

No. you’re confusing it with state change.

[] 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

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