How to cleanup a async call in react component useEffect after unmount?

Question

  useEffect(() => {
    let isActive = true;
    //get user Data from session on start if loggedin.
    gameSessionService.get().then(allSessions=>{
      if (isActive){
        if(!allSessions.data.gameSessions) return;      
          allSessions.data.gameSessions.forEach((x,i)=>{
            sessionCards.push(<SessionCard key={i} nr={i} name={x.name} desc={x.description} id={x._id} owner={myUserData._id ===x.creator} />);
          })
          setGameSessions(sessionCards)
      }
    })
     return () => {
      isActive = false;
    }

}, [myUserData])

I am awaiting a async call on a http resource in my useEffect hook, and afterwards in return I just cleanup the gameSession varaible (which contains a DOM element that is rendered).

But I still get this error:

index.js:1 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. at SessionCard (https://localhost:3000/static/js/main.chunk.js:2931:89) at section at div at MorphCard (https://localhost:3000/static/js/main.chunk.js:16875:46) at Account (https://localhost:3000/static/js/main.chunk.js:2040:85)

How do I cleanup a async function call in a propper way?

I have the same logic like in the answer here, but still get the error: https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component — Suisse, Jan 03 '22 at 14:49
You want to check `isActive` when you call the setter for state so do this instead `if (isActive) setGameSessions(sessionCards)` — Sangeet Agarwal, Jan 03 '22 at 15:39
the issue it seems is at `SessionCard` so comment out `sessionCards.push( — Sangeet Agarwal, Jan 03 '22 at 16:46

How to cleanup a async call in react component useEffect after unmount?

0 Answers0