I am working on a project where i am stuck on a issue where api being called twice without react.strictmode .
I make a layout(dashboard) which calls an /userdata api and set required states for it . Inside dashboard a child(outlet) component also have an api for /tabledata . when i am on child component and refresh the page it cause 2 apis calls /table data

parent:

useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const userDataresponse = await Api({
          method: "get",
          url: "/user/get_user_data",
        });
        const { settings, discord } = userDataresponse.data.data || {};
        setEmailAlertToggle(settings?.notifications?.email || false);
        setdiscordToggleAlert(settings?.notifications?.discord || false);
        setdiscordUsername(discord?.username || '');
        localStorage.setItem('userEmailAlertToggle', Boolean(settings?.notifications?.email));
        localStorage.setItem('userDiscordAlertToggle', Boolean(settings?.notifications?.discord));
        localStorage.setItem('userDiscordUserName', discord?.username || '');
        setuserEmail(userEmailfromLocalStorage);

        if (settings?.custom_alerts) {
          Object.values(settings.custom_alerts).forEach(alert => {
            try {
              const alertIds = Object.keys(alert.alert_ids).filter(key => alert.alert_ids[key]);
              const assetIds = Object.keys(alert.asset_ids).filter(key => alert.asset_ids[key]);
              const timeframes = Object.keys(alert.timeframes).filter(key => alert.timeframes[key]).map(replaceTimeframe);
              const combinedArray = [timeframes, alertIds, assetIds, alert.id, alert.alert_name];
              setCustomDisplayedData(prevValue => [...prevValue, combinedArray]);
            } catch (err) {
              console.log(err.message);
            }
          });
        }

        const alerts = settings?.alerts;
        if (alerts) {
          processAlerts(technicalKeys.dayTradingKey, alerts.technicals_daytrading, technicalSetters.dayTrading);
          processAlerts(technicalKeys.meanMoveKey, alerts.technicals_meanmove, technicalSetters.meanMove);
          processAlerts(technicalKeys.trendingToolsKey, alerts.technicals_trendingtools, technicalSetters.trendingTools);
          processAlerts(technicalKeys.stopHuntKey, alerts.technicals_stophunt, technicalSetters.stopHunt);
          processAlerts(technicalKeys.rsiKey, alerts.technicals_rsi, technicalSetters.rsi);
          processAlerts(technicalKeys.outsidebarKey, alerts.technicals_outsidebar, technicalSetters.outsidebar);
          processAlerts(technicalKeys.volumeKey, alerts.technicals_volume, technicalSetters.volume);
          processAlerts(technicalKeys.insidebarKey, alerts.technicals_insidebar, technicalSetters.insidebar);
          processAlerts(technicalKeys.engulfingKey, alerts.technicals_engulfing, technicalSetters.engulfing);
        }
      } catch (error) {
        console.error('Error fetching user data:', error);
      } finally {
        setLoading(false);
      }
    };

    if (
      userEmail === '' ||
      localStorage.getItem('userEmailAlertToggle') !== String(emailToggleAlert) ||
      localStorage.getItem('userDiscordUserName') !== discordUsername ||
      localStorage.getItem('userDiscordAlertToggle') !== String(discordToggleAlert)
    ) {
      fetchData();
    }
  }, []);
**child:**
 const fetchData = async (currentPageNumber) => {
    setLoader(true);
    try {
      const response = await Api({
        method: "get",
        url: "/alerts/get_alerts",
        params: {
          indicator: alertId,
          page_size: itemsPerPage,
          page_num: currentPageNumber,
        },
      });
      setTotalValues(response.data.pagination.total_count);
      setTotalPages(response.data.pagination.total_pages);
      // Update data for the current page
      setTableData((prevData) => ({
        ...prevData,
        [currentPageNumber]: response.data.data,
      }));
    } catch (error) {
      console.error("Error fetching data:", error);
    } finally {
      setLoader(false);
    }
  };
 useEffect(() => {
    if (!data[currentPage]) {
        fetchData(currentPage);
    }
  }, [currentPage]);