useEffect memory leak when setting state in fetch promise

[ryansaam]

Do you want to request a feature or report a bug?
Reporting a possible bug

What is the current behavior?
My app renders fine with no errors but I can't seem to figure out why I keep getting this warning:

index.js:1446 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.
in ArtistProfile (at App.js:51)
in component (created by Route)

api-calls.js (Here's a link):
https://github.com/ryansaam/litphum/blob/master/src/api-calls.js

App.js

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      user: {},
      spotifyAPI: {}
    }
  }
  componentDidMount() {
    if (user_token) {
      sessionStorage.setItem('access_token', user_token)
      this.setState({
        spotifyAPI: new spotifyAPI( user_token )
      })
    } else if (sessionStorage.getItem('access_token')) {
      this.setState({
        spotifyAPI: new spotifyAPI( sessionStorage.getItem('access_token') )
      })
    }
  }
  componentDidUpdate(prevProps, prevState) {
    if (this.state.spotifyAPI !== prevState.spotifyAPI)
      this.state.spotifyAPI.getUserProfile()
      .then(data => this.setState({user: data}))
  }
  
  render() {
    const { user, spotifyAPI } = this.state
    const token = sessionStorage.getItem('access_token')
    return (
      <Router>
        <div className="App">
            { (spotifyAPI.user_token && user)
            ? (<div className="logged-in">
                <div style={{width: "250px", height: "100%", position: "relative", float: "left"}} >
                  <Nav image={user.images ? user.images[0].url : null} user={user} />
                </div>
                <main id="main">
                  <Route path={`/${user.type}/${user.id}`} exact component={() => <Home spotifyAPI={spotifyAPI} />} />
                  <Route path="/artist/" component={() => <ArtistProfile spotifyAPI={spotifyAPI} />} />
                </main>
              </div>) 
            : <div onClick={() => window.location = "http://localhost:8888/login"} >log in</div>
            }
        </div>
      </Router>
    );
  }
}

ArtistProfile.js

const  ArtistProfile = props => {
  const [artistData, setArtistData] = useState(null)
  const { getArtist, getArtistAlbums, getArtistTopTracks } = props.spotifyAPI

  useEffect(() => {
    const id = window.location.pathname.split("/").pop()
    const ac = new AbortController()
    console.log(id)
    Promise.all([
      getArtist(id, ac),
      getArtistAlbums(id, ["album"],"US", 10, 0, ac),
      getArtistTopTracks(id, "US", ac)
    ])
    .then(response => {
      setArtistData({
        artist: response[0],
        artistAlbums: response[1],
        artistTopTracks: response[2]
      })
    })
    .catch(ex => console.error(ex))
    return () => ac.abort()
  }, [])
  console.log(artistData)
  return (
    <div>
      <ArtistProfileContainer>
        <AlbumContainer>
          {artistData ? artistData.artistAlbums.items.map(album => {
            return (
              <AlbumTag
                image={album.images[0].url}
                name={album.name}
                artists={album.artists}
                key={album.id}
              />
            )
          })
          : null}
        </AlbumContainer>
      </ArtistProfileContainer>
    </div>
  )
}

What is the expected behavior?
If you can see in ArtistProfile.js I am using a clean up function that aborts when the component does unmount. The fetch would be aborted and state shouldn't update but for some reason I am still getting this memory leak warning.

What I am expecting is for the warning to no longer throw because am using a clean up function that aborts the fetch.

Link to repo: https://github.com/ryansaam/litphum

• Files mentioned
  App.js: https://github.com/ryansaam/litphum/blob/master/src/App.js
  ArtistProfile.js: https://github.com/ryansaam/litphum/blob/master/src/components/ArtistProfile.js
  api-calls.js: https://github.com/ryansaam/litphum/blob/master/src/api-calls.js

My stackoverflow question: https://stackoverflow.com/questions/54954385/react-useeffect-causing-cant-perform-a-react-state-update-on-an-unmounted-comp/54964237#54964237

Which versions of React, and which browser
React 16.8.2
Latest version of Chrome

[aweary]

What I am expecting is for the warning to no longer throw because am using a clean up function that aborts the fetch.

If you're getting that warning, it means that your setState call is still being executed. Are you sure your cancellation is working correctly? Have you verified that the cleanup function returned in useEffect is being called when you expect it to be? If it is, then React is working as expected and you'll need to investigate why your cancellation isn't working.

Also it looks like you're under-specifying dependencies for your useEffect hook. It uses methods from props.spotifyAPI, but it doesn't declare them in the dependency array. We have an ESLint plugin that will catch problems like this for you.

[ryansaam]

When loading the component I added a console.log() to the clean up function. The log gets called once when fetching data (not expected), and another when I click to a different page (what I expected). I don't know why it unmounts when loading data. But my clean up function should cancel requests.

[aweary]

Can you try and create a CodeSandbox that reproduces the problem? It's difficult to try and setup and run a full application that makes actual API calls and requires user tokens.

[ghengeveld]

To avoid calling setState after unmount from a hook, you can use the useEffect callback to set a ref value on unmount, and use that as a guard in your promise callbacks to check whether the component is still mounted before updating state. Here's an example: https://github.com/ghengeveld/react-async/blob/master/src/useAsync.js

But to be honest you're probably better off not reinventing this wheel and use useAsync directly, because it's fully tested and covers other edge cases as well.

[ryansaam]

@ghengeveld Installing useAsync resolved the issue I was having

[gaearon]

Let's keep it open though. There might be a false positive warning in some cases.

It would really help if you turned this into a CodeSandbox...

[ryansaam]

Alright I will try my best to recreate it maybe using another API like a weather API. The only reason I couldn't here was because I was using Spotify and you need to have an account to get an access token

[ryansaam]

I tried to recreate the warning but I'm not getting it to show in this demo
https://codesandbox.io/s/r5l297q3oq?fontsize=14

[carl0s-sa]

Hi, I was getting this warning as well.
To reproduce you need to unmount the component calling useEffect before the promise resolves.
I've edited the (CodeSandbox) to add a 5 second delay.
Steps to reproduce:

1. Click "See charmander"
2. Right after button "Home" loads click it
3. Wait for error to pop on console

Since we can't cancel out a Promise here's an article that explains a workaround.

I believe it would make a nice QOL improvement to supress the warning (or even prevent promise execution) if the component is unmounted.

Something like returning the Promise in useEffect and let internals take care of the "isMounted" validation?
Edit2: Was not aware that useAsync was a thing

Edit: in your example try putting a console.log before the promise resolving (or rejecting) and see if it's being called. In my project I also got random warnings like those until I "guarded" all of the state updates on promises. Never saw one again.

Edit2: Took a look at the codebase, you're not using the signal on the fetch calls so the ac.abort call is not aborting them. Like so

[xgqfrms]

same question

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.

cancel promise solution

  const { adcode, regions = [] } = regionData;
  const [regionName, setRegionName] = useState('all');
  const [tableData, setTableData] = useState(regions);
  useEffect(() => {
    let isSubscribed = true;
    // getRegionName(adcode).then(setRegionName);
    getRegionName(adcode).then(() => {
      if(isSubscribed) {
        return setRegionName;
      }}
    );
    const promises = [];
    regions.forEach(item => {
      promises.push(
        getRegionName(item.code)
        .then(name => {item.name = name;})
        // eslint-disable-next-line no-console
        .catch(() => console.log('error', item.code)),
      );
    });
    Promise
    .all(promises)
    .then(() => {
      if(isSubscribed) {
        return setTableData(regions.filter(({ name }) => !!name));
      }
    });
    return () => isSubscribed = false;
  }, [adcode, regionData, regions]);

[giovanigenerali]

How to clean up subscriptions in react components using AbortController
https://medium.com/@selvaganesh93/how-to-clean-up-subscriptions-in-react-components-using-abortcontroller-72335f19b6f7