async inside useEffect react

Question

So I have a function to run async, so put async inside useEffect, in below is my code

 useEffect(() => {
    const data = async () => {
      const data = await getAllVertification();
      if (!data.status) {
      } else {
        setAlldata(data.data);
        setLoadingAction([]);
        let tmp = [];
        for (const element of data.data) {
          tmp.push({ status: false });
        }
        setLoadingAction(tmp);
      }
    };

    data();
  }, [update]);

but got waning like this

React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. 
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Can someone explain to me ?

Does this help you? stackoverflow.com/questions/53332321/… — MWO
– MWO, Commented May 30, 2021 at 18:09

Prayag Choraria · Accepted Answer · 2021-05-30 18:13:13Z

1

You'll need to cancel the operations after await resolves when the component is unmounted. Here's one of the ways to do this.

  useEffect(() => {
    let isSubscribed = true;
    const data = async () => {
      const data = await getAllVertification();
      if(isSubscribed) {
        if (!data.status) {
        } else {
          setAlldata(data.data);
          setLoadingAction([]);
          let tmp = [];
          for (const element of data.data) {
            tmp.push({ status: false });
          }
          setLoadingAction(tmp);
        }
      }
    };
    data();
    return () => (isSubscribed = false);
  }, [update]);

answered May 30, 2021 at 18:13

Prayag Choraria

8196 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

michmich112 · Accepted Answer · 2021-05-30 18:10:55Z

rewriting you code to make it more clear:

 useEffect(() => {
    const getData = async () => {
      const data = await getAllVertification();
      if (!data.status) {
      } else {
        setAlldata(data.data);
        setLoadingAction([]);
        let tmp = [];
        for (const element of data.data) {
          tmp.push({ status: false });
        }
        setLoadingAction(tmp);
      }
    };

    getData();
  }, [update]);

Here getData is an Async function which means that when you run it it returns a promise which will be executed at the end of the current event loop cycle. You dont have to make getData though.
Try this:

 useEffect(() => {
    getAllVertification().then(data => {
      if (!data.status) {
      } else {
        setAlldata(data.data);
        setLoadingAction([]);
        let tmp = [];
        for (const element of data.data) {
          tmp.push({ status: false });
        }
        setLoadingAction(tmp);
      }
    }
  }, [update]);

Dmitriy Mozgovoy · Accepted Answer · 2021-05-30 21:05:28Z

0

Using a custom hook, we can do the following:

import { useAsyncEffect } from "use-async-effect2";

// ...

 useAsyncEffect(function*(){
      const data = yield getAllVertification();
      if (data.status) {
        setAlldata(data.data);
        let tmp = [];
        for (const element of data.data) { 
          tmp.push({ status: false }); // weird code
        }
        setLoadingAction(tmp);
      }
    };
  }, [update]);

answered May 30, 2021 at 21:05

Dmitriy Mozgovoy

1,6072 gold badges11 silver badges10 bronze badges

Collectives™ on Stack Overflow

async inside useEffect react

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related