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, Dec 09 '20 at 22:57
Yes it is a state variable [moisture, setMoisture] = useState[''] — Justin Oberle, Dec 10 '20 at 00: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, Dec 10 '20 at 00:08
Have you seen this question yet? I think your situation is similar. https://stackoverflow.com/questions/56442582/react-hooks-cant-perform-a-react-state-update-on-an-unmounted-component Make sure to return a function that does the cleanup towards the end of `useEffect`. Something like `return () => { ... };` — Andy Refuerzo, Dec 10 '20 at 00:22
Solution is identical to this answer... https://stackoverflow.com/questions/56442582/react-hooks-cant-perform-a-react-state-update-on-an-unmounted-component — Justin Oberle, Dec 10 '20 at 00:30

score 1 · Accepted Answer · answered Dec 10 '20 at 00:57

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 '20 at 00:57

Andy Refuerzo

3,312
1
31
38

React.js useEffect with nested async functions

1 Answers1