useEffect(() => {
  dispatch(getAllPatients());
}, [dispatch]);

<Row>
  <Col
    xs={12}
    lg={3}
    style={{ paddingRight: '0', width: '${barWidth}px' }}
    className='position-relative toggle-patient-bar ps-0'
  >
    <PatientSidebar setBarWidth={setBarWidth} />
  </Col>
  <Switch>
    <Route
      render={() => <PatientData barWidth={barWidth} />}
      exact
      path={'/patient/:id'}
      strict
    />
  </Switch>
</Row>

I have this parent page with nested routing. The problem is when I click on patient to open its data in UI using react-router-dom (Link) it forces to remount this parent component which in result also forces to rerun useEffect which I really don’t want to happen here.

NOTE: IT ONLY OCCURS ON PATIENT WHICH IS SELECTED FIRST TIME AFTER THAT IF I LOAD ANOTHER PATIENT IT DOESN’T RE MOUNT PARENT COMPONENT AND EVERYTHING WORKS FINE AS EXPECTED.

HERE IS THE SIDE BARCODE OF ALL PATIENTS:-
Here I posted the code of sidebar, if I click on patient to loaded it on nested Route.

{(patients || []).map((item, idx) => {
  return (
    <Link
      to={'/patient/${item._id}'}
      className='text-decoration-none text-secondary font-size-16'
      key={item._id}
    >
      <div
        key={idx}
        style={{
          borderColor:
            patient && patient._id === item._id
              ? '#1e90ff'
              : '',
        }}
        className='p-2 patients border-bottom-1 d-flex align-items-center'
        onClick={() => {
          getPatient(item);
          toogleTab();
        }}
      >
        <img
          className='rounded-circle avatar-xxs header-profile-user me-3 mt-0'
          src={item.avatar}
          alt='Patient Avatar'
        />
        <h3 className='text-decoration-none text-capitalize mb-0 text-secondary font-size-14'>
          {item.firstName}
        </h3>
      </div>
    </Link>
  );
})}

I tried different ways of preventing it like passing dependency array but I think its runs due the component remount so that really didn’t work out.