VirtualizedList occasionally updates state on unmounted components

[TikiTDO]

The problem

Occasionally (but not always) when using FlatList, SectionList, or other components based on VirtualizedList in order to display complex list items, the console will display a "Can't perform a React state update on an unmounted component." warning.

How to reproduce

Simplified test case: https://codesandbox.io/s/pedantic-stallman-27nds?file=/src/App.js

Steps to reproduce:

1. Rapidly click the Toggle button
2. If the warning will happen, it usually happens within the first 10-20 clicks. If it does not happen with in the first few clicks, then it usually won't happen until a refresh.

When it does happen it looks as follows:

Expected behavior

VirtualizedList should not try to update state on unmounted components.

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.13.18
• React (version): 16.3.1
• Browser: Chromium 85.0.4183.121

Additional context

I've been able to prevent this warning by removing this setTimeout call. Without that setTimeout call the warning does not happen, but at the cost of visibly reducing list performance.

It appears the measure timeout triggers before any of the unsubscribe code from VirtualizedList / Batchinator / InteractionManager has a chance to run, which in turn causes this warning.

Below is a detailed stack trace of the error in the wild:

[connectdotz]

I have a similar problem with onLayout is invoked on an unmounted component. Note, this doesn't happen with react-native. Is this a regression? seems like it has been fixed before (#939)?

[necolas]

I don't think the setTimeout will be needed once RN releases the Fabric renderer which can perform sync tasks. So it might be worth removing and just accepting the divergence from RN. I don't know how that relates to VirtualizedList performance, but that component's implementation isn't well suited to web anyway.

[spencerlevitt]

Any update on this? I'm seeing the same error when working with a very simple FlatList along with media queries and when resizing the browser window.

  const isMobile = useMediaQuery({ maxWidth: 600 });

  if (isMobile) {
    return (
      <FlatList
        data={[1, 2, 3, 4]}
        keyExtractor={(item) => `${item}`}
        renderItem={({ item }) => {
          return (
            <View>
              <Text>{item}</Text>
            </View>
          );
        }}
      />
    );
  } else {
    return null;
  }

[steida]

I had the same problem with the Image component (unreproducible) and now I have the same problem with Pressable and keypress. The mouse click is OK, keyboard enter press not.

[ooooseaoooo]

I am having the same issue which is always reproducible. When I called navigation.navigate("screenB") in screenA, where screenA has an Animated.Flatlist. The flatlist's vitualizedList seems to be calling setState and it create this warning.

here is the call stack:

[fkeloks]

Any news for this PR? I have the same problem

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 the componentWillUnmount method.
    at VirtualizedList (http://localhost:19006/static/js/bundle.js:120122:34)
    at FlatList (http://localhost:19006/static/js/bundle.js:118198:34)
    at AnimatedComponent (http://localhost:19006/static/js/bundle.js:76448:83)

[steida]

Ignore it. It's past https://github.com/facebook/react/pull/22114

[necolas]

Closing this old issue because VirtualizedList has been updated a few times since, and it will be developed exclusively out of the RN monorepo in the future.