web-dev-qa-db-fra.com

Arrêtez useEffect de s'exécuter sur le montage

Je veux que useEffect ne s'exécute que lorsque ma liste de dépendances change, il s'exécute également à chaque fois que le composant est monté, existe-t-il un moyen de ne pas se déclencher lors du montage?

Vous pouvez dire à React pour ignorer l'application d'un effet si certaines valeurs n'ont pas changé entre les rendus.

J'ai d'abord pensé que cela signifiait qu'il ne devrait pas être rendu sur les montages suivants mais cette question a clarifié cela.

J'affiche une liste d'enregistrements dans une "page" principale (react-router), l'utilisateur peut choisir un seul enregistrement et aller à la page de détail, puis revenir à la page principale - le composant de la liste principale est donc complètement démonté/monté dans ce scénario. Et chaque fois que je charge la "page maître", je vois les données en cours de récupération, je veux que cela se produise uniquement lorsque l'une des dépendances change; ces dépendances et les données elles-mêmes sont stockées dans Redux afin qu'elles soient globales.

UseEffect ou un autre hook peut-il être fait pour se déclencher uniquement lorsque les dépendances changent?

const {page, pageSize, search, sorts} = useSelector(getFilters);
const data = useSelector(getData);

useEffect(() => {

  console.log("fetching");
  dispatch(fetchData(page, pageSize, search, sorts));

}, [page, pageSize, search, sorts]);
reactjsreact-reduxreact-hooksuse-effect
5
user210757

Vous ne pouvez pas le configurer hors de la boîte.

Mais, un modèle courant consiste à utiliser un indicateur isMounted comme ceci:

const useFetchNotOnMount = () => {
  const { page, pageSize, search, sorts } = useSelector(getFilters);
  const dispatch = useDispatch();
  const data = useSelector(getData);

  const isMounted = useRef(false);

  useEffect(() => {
    if (isMounted.current) {
      console.log('fetching');
      dispatch(fetchData(page, pageSize, search, sorts));
    } else {
      isMounted.current = true;
    }
  }, [page, pageSize, search, sorts]);
};
5
Dennis Vash