I’m an Angular developer who’s working on a new React app (I’m learning on the way). There’s a concept I think I don’t understand.

import './LeadPool.scss';
import SideMenuLayout from "../../layouts/side-menu/SideMenuLayout";
import {
  IonButton,
  IonCard,
  IonCardContent,
  IonChip,
  IonCol,
  IonRow,
  IonSearchbar,
  IonToggle, useIonLoading,
  useIonModal
} from "@ionic/react";
import React, {useEffect, useState} from "react";
import {Table, TableColumnsType, Tooltip} from "antd";
import {useParams} from "react-router-dom";
import {useService} from "../../store/service-provider/ServiceProvider";
import {LeadBo} from "../../services/lead-search/bos/leadBo";
import {PageBo} from "../../services/lead-search/bos/pageBo";
import {LeadPoolDataTypeInterface} from "./interfaces/lead-pool-data-type.interface";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import LeadViewer from "../../components/lead-viewer/LeadViewer";
import {OverlayEventDetail} from "@ionic/react/dist/types/components/react-component-lib/interfaces";
import Lottie from "lottie-react";
import pulsingAnimation from '../../assets/lotties/pulsing.json';

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

  const [datatable, setDatatable] = useState<LeadPoolDataTypeInterface[]>(null);
  const [pageLeadBoList, setPageLeadBoList] = useState<LeadBo[]>(null);
  const [selectedLeadBo, setSelectedLeadBo] = useState<LeadBo>(null);
  const services = useService();
  const { leadPoolId }  = useParams<{leadPoolId: string}>();
  const [presentLoading, dismissLoading] = useIonLoading();
  const [page, setPage] = useState<PageBo>({
    pageSize: 15,
    currentPage: 1,
    searchText: '',
    leadPoolId: leadPoolId,
    totalDocuments: 44,
    searchAllLeads: true,
  });
  const columns: TableColumnsType<LeadPoolDataTypeInterface> = [
    {
      title: 'Company',
      dataIndex: 'companyName',
      key: 'companyName',
      render: (value, record, index) =>
        <div>
          <a onClick={ (event)=> {
            startLeadViewer(record.id);
          }}>{ value }</a>
        </div>,
    },
    { title: 'Address', dataIndex: 'address', key: 'address' },
    {
      title: 'Social Media',
      dataIndex: 'socialMediaLinkList',
      key: 'socialMediaLinkList',
      render: (value, record, index) =>
        <div>
          { record.socialMediaLinkList.map( (socialMediaLink, index) => {
            return  (
              <Tooltip title={'Visit social'} key={record.id + '_' + index}>
                <a href={socialMediaLink.link}
                   target="_blank"
                   rel="noopener noreferrer">
                  <FontAwesomeIcon
                    icon={socialMediaLink.icon}
                    size={"2x"}
                    color={'gray'}
                    className="ml-2"
                    onClick={ (event) => {
                      console.log('onClick event', event);
                    }}
                  />
                </a>
              </Tooltip>
            )
          })}
        </div>,
    },
    {
      title: 'Phones',
      dataIndex: 'phone',
      key: 'phone',
      render: (value, record, index) => {
        if(record.phoneList.length > 0) {
        return (
            <div>
              <IonChip
                color="tertiary"
              >
                { record.phoneList[0].phoneNumber }
                <b style={{marginLeft: '0.5em'}}>{(record.phoneList.length > 1) ? '(+' + record.phoneList.length + ')' : ''}</b>
              </IonChip>
            </div>
        )}
      }
    },
    {
      title: 'Emails',
      dataIndex: 'email',
      key: 'email',
      render: (value, record, index) => {
        if(record.emailList.length > 0) {
          return (
            <div>
              <IonChip
                color="primary"
              >
                { record.emailList[0].email }
                <b style={{marginLeft: '0.5em'}}>{(record.emailList.length > 1) ? '(+' + record.emailList.length + ')' : ''}</b>
              </IonChip>
            </div>
          )}
      }
    },
    {
      title: 'Status',
      dataIndex: 'businessStatus',
      key: 'businessStatus',
      render: (value, record, index) => {
        if(record.isOperational) {
          return  <Lottie animationData={pulsingAnimation}
                          loop={true}
                          className="lead-pool-pulsing"
                  />
        }
      }
    },
  ];
  let isLeadViewerOpening = false;

  function generateDatatable(leadBoList: LeadBo[]) {
    const datatableList: LeadPoolDataTypeInterface[] = [];
    leadBoList.forEach( leadBo => {
      const datatable: LeadPoolDataTypeInterface = {
        key: leadBo.id,
        id: leadBo.id,
        companyName: leadBo.name,
        address: leadBo.fullAddress,
        socialMediaLinkList: leadBo.getSocialMediaLinkList(),
        phoneList: leadBo.getPhoneList(),
        emailList: leadBo.getEmailList(),
        isOperational: leadBo.isOperational(),
      }
      datatableList.push(datatable);
    })
    return datatableList;
  }


  function refreshPage(pageLocal: PageBo) {
    console.log('Kick11111 refreshPage', null);
      // setDatatable(null)
      // services.leadSearchService.getLeadPool(pageLocal).then((leadPoolBo) => {
      //   setPageLeadBoList(leadPoolBo.leadList);
      //   setDatatable( generateDatatable(leadPoolBo.leadList) );
      //   setPage( { ...pageLocal, totalDocuments: leadPoolBo.totalDocumentCount });
      // });
  }


  useEffect(() => {
    console.log('Kick222222 useEffect', null);
    refreshPage( page )
  }, []);


  const [presentLeadViewer, dismissLeadViewer] = useIonModal(LeadViewer, {
    onDismiss: (data: string, role: string) => {
      dismissLeadViewer(data, role)
    },
    leadBo: selectedLeadBo,
  });


  async function startLeadViewer(leadId: string){
    if(isLeadViewerOpening) { return }
    isLeadViewerOpening = true;
    presentLoading('Loading...');
    console.log('Kick11111 pageLeadBoList', pageLeadBoList);
    setSelectedLeadBo( pageLeadBoList.find( lead => lead.id == leadId) );
    presentLeadViewer({
      onWillDismiss: (ev: CustomEvent<OverlayEventDetail>) => {},
      cssClass: 'fullscreen-modal',
      onDidPresent: () => {
        dismissLoading();
        isLeadViewerOpening = false
      },
    } );
  }


  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: LeadPoolDataTypeInterface[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    }
  };


  return (
    <SideMenuLayout>
      <div className="container lead-pool">

        <section className="gr-p-t-14">
          <h1 className="mb-2">Lead Pool</h1>
          <p>Review all your leads and start marketing to them</p>
        </section>

        <section className="gr-m-t-5">
          <IonCard>
            <IonCardContent>
              <h2>Summary</h2>
            </IonCardContent>
          </IonCard>
        </section>

        <section className="gr-m-t-2">
          <IonCard className="ion-no-margin gr-p-2 gr-p-t-5 gr-p-b-5">
            <IonCardContent>

              <IonRow className="gr-p-b-2">
                <IonButton color="primary"
                           onClick={() => {
                           }}
                >
                  Start to market your leads
                </IonButton>
                <IonButton fill="clear" >
                  Import from CSV
                </IonButton>
                <IonButton fill="clear">
                  Export to CSV
                </IonButton>
              </IonRow>

              <div className="lead-pool__content__datatable">

                <div className="lead-pool__content__datatable__filter">
                  <IonRow>
                    <IonCol className="flex justify-start items-center">
                      <h4 className="gr-p-l-2">Leads</h4>
                    </IonCol>
                    <IonCol className="flex justify-start items-center">
                      <IonToggle checked={!page.searchAllLeads}
                                 onIonChange={(event) => {
                                   refreshPage({...page, searchAllLeads: !event.detail.checked})
                                 }}
                      >
                        Show leads from all searches
                      </IonToggle>
                    </IonCol>
                    <IonCol className="flex items-center">
                      <IonSearchbar debounce={400}
                                    onIonInput={(ev) => {
                                      const target = ev.target as HTMLIonSearchbarElement;
                                      refreshPage({...page, searchText: target.value});
                                    }}
                      />
                    </IonCol>
                  </IonRow>
                </div>

                <Table
                  className="lead-pool__content__datatable__table"
                  columns={columns}
                  pagination={{
                    current: page.currentPage,
                    pageSize: page.pageSize,
                    total: page.totalDocuments,
                    onChange: (pageNumber) => {
                      refreshPage({...page, currentPage: pageNumber});
                    }
                  }}
                  dataSource={datatable}
                  loading={(datatable == null)}
                />
              </div>
            </IonCardContent>
          </IonCard>
        </section>

        <Disclaimer />

      </div>
    </SideMenuLayout>
  );
};

export default LeadPool;

I want useEffect to run only once. I’m aware of the development double run; that’s not the issue.

Sitemap: Dashboard page > Lead Page

When navigating from the dashboard to the lead page, useEffect() runs as expected, triggering refreshPage(). However, if I go back and forth, the lead page API calls accumulate (2, 4, 6, etc.). The dashboard page has a similar useEffect(), but it doesn’t pile up requests.

The service has nothing to do with it. Even with console.log’s I get the same behavior

Possible causes:

1. The anonymous function inside useEffect() remains in memory and is
   never released.

2. Something on the page stays in memory, triggering useEffect()
   repeatedly.

How can I resolve this?

PS: Obviously, I can’t produce a Stackblitz reconstitution of the problem… every other useEffect() in my code behaves as it should. Only THIS one for some reason doesn’t want to release the function.