How to prevent react page from re-rendering when using connected-react-router

Question

-MainPage.js

import { push } from 'connected-react-router';

const showDataPage = () => {
   dispatch(push(ROUTES.DATA))
}

-DataPage.js

export const DataPage = () => {
  const dispatch = useDispatch();

  React.useEffect(() => {
      dispatch(Actions.fetchData());
  }, []);

When I navigate to the DataPage screen, it will call fetchData api which takes about 20 secs to get response.

If I go to another page within 20sec without full response back from the server and come back to DataPage, it will fire another fetchData api.

And I only want to make this api call for the very-first rendering of this DataPage screen.

I know this can be done using useState or useRef, but what I want is re-using the component that's already rendered rather than remounting DataPage again.

Using push / replace from connected-react-router will mount new component.

Thanks.

Answer 1

You can try to use the library https://github.com/CJY0208/react-activation to make keep-alive router This lib will help you only render once - the first visit page.