React.js useEffect with nested async functions

Question

I have the common warning displaying upon loading of my web app but never again...

Warning: Can't perform a 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.

EDIT**** It is caused by this chunk of code. I have narrowed it down to one function. It blows up when I try to setMoisture state. I am not sure why.

function getData (){
    Axios.get("http://localhost:3001/api/get-value").then((response) => {
        const recievedData = response.data;
        const dataValue = recievedData.map((val) => {
            return [val.value]
        })
        if (loading === true){
            setLoading(false);
        }
        return parseInt(dataValue);
    }).then((resp)=>setMoisture(resp))
}

React.useEffect(() => {
    if (moisture === "initialState"){
        getData();
    }
}, []);

I think I have narrowed down the issue to within the getData function. — Justin Oberle
– Justin Oberle, Commented Dec 9, 2020 at 22:57
Yes it is a state variable [moisture, setMoisture] = useState[''] — Justin Oberle
– Justin Oberle, Commented Dec 10, 2020 at 0:07
I have eddited my previous post. This is what is causing the issue. Any idea how to fix this? I am calling setLoading also which is a state variable and no issues — Justin Oberle
– Justin Oberle, Commented Dec 10, 2020 at 0:08
Have you seen this question yet? I think your situation is similar. stackoverflow.com/questions/56442582/… Make sure to return a function that does the cleanup towards the end of useEffect. Something like return () => { ... }; — Andy Refuerzo
– Andy Refuerzo, Commented Dec 10, 2020 at 0:22

Andy Refuerzo · Accepted Answer · 2020-12-10 00:57:52Z

1

Posting the answer here (based from the comments) for completeness.

Basically, use local variables and cleanup function towards the end of useEffect(). Using this as reference:

Similar situation here

answered Dec 10, 2020 at 0:57

Andy Refuerzo

3,3321 gold badge35 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

React.js useEffect with nested async functions

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related