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,154
1
29
37

score 0 · Answer 2 · answered Dec 10 '20 at 02:16

You should declare the function inside the useEffect or add it as a dependency. one way to do it's just moving your function inside the hook.

  // I assumed that your useState hooks looks something similar.
  const [moisture, setMoisture] = React.useState('initialState')
  const [loading, setLoading] = React.useState(true)

  React.useEffect(() => {
    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)))
    }

    if (moisture === "initialState"){
      getData();
    }

  }, [])

You also probably want to first set your data to the state and then change your loading state to false, this is gonna prevent some bugs. This is another way to do it and manage the loading state and the promises

  React.useEffect(() => {
    function getData() {
      setLoading(true)
      Axios.get("http://localhost:3001/api/get-value")
        .then((response) => {
          const dataValue = response.data.map((val) => {
            return [val.value]
          })
          // This is going to pass 0 when can't parse the data
          setMoisture(parseInt(dataValue) || 0)
          setLoading(false)
        })
    }

    getData()
  }, [])

React.js useEffect with nested async functions

2 Answers2