0
-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.

NinjaDev
  • 402
  • 2
  • 6
  • Did you look into React.memo ? This sounds like a good use case for it. Example can be found here: https://dmitripavlutin.com/use-react-memo-wisely/ – chickenchilli Oct 08 '20 at 03:24

1 Answers1

0

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.

cuongdevjs
  • 711
  • 6
  • 15