Réagir Empêcher la récupération lors du changement de page

Je travaille actuellement sur une application de réaction qui récupère du contenu de mon backend, ce qui s'avère très lourd. Mon intention est de maintenir le composant en vie et d'empêcher un nouveau rendu à chaque fois que l'utilisateur passe d'une page à une autre. Actuellement, je récupère toutes les données et les stocke avec react-redux et thunk.

J'aimerais conserver l'option d'actualisation via un clic sur un bouton.

J'ai essayé d'encapsuler le composant dans un composant React.memo mais je n'ai pas eu de chance.

Voici mon code au cas où vous pourriez m'aider:

C'est le composant que j'aimerais ne pas restituer à moins que l'état d'actualisation ne change :

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getNFTs } from "../../actions/NFT";
export const LandList = React.memo(() => {
 const { gettingNFTs, NFTs } = useSelector((state) => state.NFT);
 const [refresh, setRefresh] = useState(0);
 const dispatch = useDispatch();
 useEffect(() => {
 dispatch(getNFTs());
 }, []);
 return (
 <div>
 <h2>LandList</h2>
 {gettingNFTs? <p>getting nfts...</p>: <p>Done</p>}
 </div>
 );
});

Et voici mon action au magasin (j'utilise thunk ici):

export const getNFTs = () => {
 return async (dispatch) => {
 dispatch(getNFTsAction());
 const resp = await fetchWithoutToken("marketplace");
 const body = await resp.json();
 dispatch(finishGetNFTsAction(body.publishedLands));
 console.log(body);
 };
};
const getNFTsAction = () => ({
 type: types.NFTsGetStart,
});
const finishGetNFTsAction = (NFT) => ({
 type: types.NFTsGetFinished,
 payload: NFT,
});

Toute aide serait grandement appréciée!

Solution du problème

Vous pouvez utiliser redux ou un crochet contextuel pour le faire, créer un indicateur global et le modifier après la première requête réussie, et créer une condition dans le crochet useEffect

export const LandList = React.memo(() => {
 const { gettingNFTs, NFTs } = useSelector((state) => state.NFT);
 const [refresh, setRefresh] = useState(0);
 const dispatch = useDispatch();
 useEffect(() => {
 // here is the global variable or property, check it before your dispatch
 if(!fetched){ 
 dispatch(getNFTs());
 }
 }, []);
 return (
 <div>
 <h2>LandList</h2>
 {gettingNFTs? <p>getting nfts...</p>: <p>Done</p>}
 </div>
 );
});