Page MenuHomePhabricator

Possible calls to setState on unmounted components
Closed, ResolvedPublicBUG REPORT

Description

Steps to Reproduce:

It's a race condition so it doesn't work every time.

  1. From the search screen, select a search result and select the "close" softkey before the article has finished loading

Actual Results:

Message in console:

Can't call "this.setState" 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 the componentWillUnmount method.

Expected Results:

The first call is cancelled when the second one is issued. The general pattern to fix this is the following

useEffect( () => {
  const handler = doApiCall()
  handler.then( data => setState(data) )
  return () => {
    // do something here that will prevent handler.then() from being called
    // since this component is unmounting
    handler.abort()
  }
}, [] )

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
AMuigai triaged this task as Medium priority.Feb 13 2020, 1:49 PM
AMuigai edited projects, added Inuka-Team (Kanban); removed Inuka-Team.

This problem will be gone once this T245156: Remove random article feature before launch in LSK is done,
another place of getting race condition is on the searching page that we already handle.

I didn't even know there was a random article feature in the left soft key now (see T245438), quite a surprise.

@hueitan are you suggesting we handle T245156 first?

@eamedina random feature will be either removed or hidden in the code.

It's a general issue with our API calls. I updated the description with an example other than the random feature.

Thanks @SBisson got it! yes I can see this is a general issue now.

Changes were made to fix this issue but I would like to keep this task open and revisit the solution when we can.

The issue was fixed in a way that is heavily dependent on the specific features (search, read article) and the navigation order between those. If we change it or add features it is likely to come back. The deterministic way to fix it is by ensuring that components that depend on data cancel their own requests when unmounting.

AMuigai edited projects, added Inuka-Team (Kanban); removed Inuka-Team.