Prevent to refresh tab with leaflet map in tabbed react app

Hello everyone I am kind of new in react/ionic and I writing tab app with ionic/react with this version.

Ionic Framework : @ionic/react 5.2.2

As for the title I am writing an app using the ionic template tabbed app.
One of the tabs contain a leaflet map and all the time that I switch between tabs , the maps get reloaded.
I understand that this is the classic behaviour from ionic/react, but I would like to keep the map from being destroied and rendered again.
Also because I am trying to draw the route from point A to point B in the maps, so I want to avoid unuseful call to leaflet and draw all the route slowing down the render.
How I can achieve this ?
The map component is a functional component, which wait for the coordinates returned from a module outside of this component.
If you need to see the code, or any other information let me know :slight_smile:

  1. code is always more helpful then a description because it allows us to duplicate the error and try to find a solution.

My Guess is that you can try and use the lifecycle hooks and not render the map if the component is not visible.

Hello @aaronksaunders.
So this is the image from my app

This is the code specific for this tab
The footer is a component which is present in each ionpage for each tab

.... import that I need to do
var startWatchID = "START";
const description = "blah blah";
let bcnumber = "25 bc";
let latitude, longitude = ''
let old_coords = {old_lat : "", old_lon: ""}

const Home = () => {
  let coords = usePosition({});
  var watchID = 0;

  let [buttonText, setButtonText] = useState("START");
  let [buttonColor, setButtonColor] = useState("#006F16");

  function checkLatLon(lat, lon) {
    if (lat && lon) {
      return (
        <RenderMap latitude={lat} longitude={lon}>
          <CenterMap latitude={lat} longitude={lon}></CenterMap>
        </RenderMap>
        
      );
    } else {
      return <DivLoading />;
    }
  }

  function startToRide() {
    if (localStorage.getItem("UserRide") === "false") {
      utils.checkOldCoordsPresentInLocalStorage()
      old_coords["old_lat"] = coords.latitude;
      old_coords["old_lon"] = coords.longitude;
      utils.positionSaveData(old_coords);
      localStorage.setItem("UserRide", true.toString());
      setButtonColor("#D20D0D");
      setButtonText("STOP");
      watchID = onDeviceReady();
      localStorage.setItem("watchID", watchID.toString());
      startWatchID = "STOP";
    } else {
      localStorage.setItem("UserRide", false.toString());
      setButtonColor("#006F16");
      setButtonText("START");
      navigator.geolocation.clearWatch(Number(localStorage.getItem("watchID")));
      localStorage.removeItem("watchID");
      utils.removeOldCoords()
      startWatchID = "START";
    }
  }

  return (
    <IonPage>
      <IonContent>
        {/* Header components */}
        <HeaderHome description={description} bcnumber={bcnumber} />
        <div className="main_div_home_map">
          {
            checkLatLon(coords.latitude, coords.longitude)
          }
        </div>
        <div className="main_div_home_bottom">
          <div className="div_current_km">
            <p className="p_description_left">Kms</p>
            <p className="p_description_right">43</p>
          </div>
          <div className="div_current_coins">
            <p className="p_description_left">Coins</p>
            <p className="p_description_right">4</p>
          </div>

          <div className="div_co2_emissions">
            <p className="p_description_left">KG Co2 saved</p>
            <p className="p_description_right">1.5kg</p>
          </div>
          <div className="div_ride_button">
            <IonButton
              shape="round"
              onClick={startToRide}
              style={{ "--background": `${buttonColor}` }}
            >
              {buttonText}
            </IonButton>
          </div>
        </div> 
        <div>
          <TemplateFooter />
        </div>
      </IonContent>
    </IonPage>
  );
};

export default Home;

And the code for switching between tabs is this one

import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import { AuthRoutes } from "../views/Auth";
import PrivateRoute from "../PrivateRoute";
import Shop from "../views/Dashboard/components/shop";
import Dashboard from "../views/Dashboard/components/home";
import Profile from "../views/Dashboard/components/profile";
import Offers from "../views/Dashboard/components/offers";

const ApplicationRoutes = () => {
    return (   
     // route can be omitted
        <Route>
            <Switch>
                <PrivateRoute exact path="/dashboard" component={Dashboard} />
                <PrivateRoute exact path="/offers" component={Offers} />
                <PrivateRoute exact path="/shop" component={Shop} />
                <PrivateRoute exact path="/profile" component={Profile} />
                <Route path="/auth" component={AuthRoutes} />
                <Redirect to="/auth" from= "/" />
            </Switch>
        </Route>
    );
}

export default ApplicationRoutes;

I was thinking, maybe I can create a IonPage template and load different div based on the page that I need to load so I can hide/show them ?

Cheers mate :slight_smile: