How to make code synchronous in useEffect

Question

I know its not recommended to create add async to useEffect but how can I make sure my function is completely done before continuing

Here is my code

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

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

    }, [])

If I run in my console its showing

1

99

2

I was hopeing its

1

2

99

Answer 1

Can you try this (not at pc right now)

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

Are you doing this because you want the MAINOBJECT state property to be set by the time you're ready to execute console.log(99) ?

If so, one thing you could do is use an additional useEffect hook that only executes when the state property MAINOBJECT updates:

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

Answer 3

You may use an Immediately Invoked Function Expression or IFFY . This will also allow you to use async/await instead of going back to then-chaining.

Essentially you are wrapping the effect body in an async function, which you immediately invoke.

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

Just put your logic outside the EFFECT.

You can define an async function in component and then call it in EFFECT. If you care the performance, wrap it with useCallback . Don't forget setting it as a dependency.

The better practice is to extract the static logic into small functions outside the component.