Как предотвратить повторную рендеринг страницы реакции при использовании connected-response-router

-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());
  }, []);

Когда я перехожу на экран DataPage, он вызывает fetchData api, что занимает около 20 секунд, чтобы получить ответ.

Если я перейду на другую страницу в течение 20 секунд без полного ответа от сервера и вернусь к DataPage, он запустит другой api fetchData.

И я хочу сделать этот вызов api только для самого первого рендеринга этого экрана DataPage.

Я знаю, что это можно сделать с помощью useState или useRef, но я хочу повторно использовать уже отрисованный компонент, а не повторно монтировать DataPage.

Использование push / replace из connected-response-router приведет к монтированию нового компонента.

Спасибо.