Comment rendre le code synchrone dans useEffect

Question

Je sais qu'il n'est pas recommandé de créer un ajout asynchrone à useEffect, mais comment puis-je m'assurer que ma fonction est complètement terminée avant de continuer.

Voici mon code

useEffect(
   () => {
         const RetrieverDataProcess = async () => {
             const GetMainListResults = await GetMainList(FORMSTATUS.ID);
             setMAINOBJECT(GetMainListResults); //useState
             console.log(2)
         }

         console.log(1);
         RetrieverDataProcess();
         console.log(99);

    }, [])

Si j'exécute dans ma console, il montre

1

99

2

J'espérais que son

1

2

99

Answer 1

Pouvez-vous essayer ceci (je ne suis pas sur mon ordinateur pour le moment) ?

useEffect(
   () => {
         const RetrieverDataProcess = async () => {
             const GetMainListResults = await GetMainList(FORMSTATUS.ID);
             setMAINOBJECT(GetMainListResults); //useState
             return console.log(2)
         }

         console.log(1);
         RetrieverDataProcess().then(()=>{
             console.log(99);
         });

    }, [])

Answer 2

Est-ce que vous faites ça parce que vous voulez MAINOBJECT pour que la propriété de l'état soit définie au moment où vous êtes prêt à exécuter console.log(99) ?

Si c'est le cas, une chose que vous pouvez faire est d'utiliser un supplément de useEffect qui ne s'exécute que lorsque la propriété d'état MAINOBJECT des mises à jour :

useEffect(() => {
  if (MAINOBJECT) {
    console.log(99);
  }
}, [MAINOBJECT]);

Answer 3

Vous pouvez utiliser un Expression de la fonction immédiatement invoquée o IFFY . Cela vous permettra également d'utiliser async/await au lieu de revenir au then-chaining.

Essentiellement, vous enveloppez le corps de l'effet dans une fonction asynchrone, que vous invoquez immédiatement.

useEffect(() => {
     (async function anyName() {
         const RetrieverDataProcess = async () => {
             const GetMainListResults = await GetMainList(FORMSTATUS.ID);
             setMAINOBJECT(GetMainListResults); //useState
             console.log(2);
         }

         console.log(1);
         // now you can await the async function to make sure it completes
         await RetrieverDataProcess();
         console.log(99);
     // note the invocation:
     })();
}, [])

Answer 4

Mettez juste votre logique en dehors de l'EFFET.

Vous pouvez définir une fonction asynchrone dans le composant et l'appeler ensuite dans EFFECT. Si vous vous souciez de la performance, enveloppez-la avec useCallback . N'oubliez pas de le définir comme une dépendance.

La meilleure pratique consiste à extraire la logique statique dans de petites fonctions extérieures au composant.