Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FlatList.getItemLayout called too many times #22444

Closed
3 tasks done
HaloWang opened this issue Nov 28, 2018 · 11 comments
Closed
3 tasks done

FlatList.getItemLayout called too many times #22444

HaloWang opened this issue Nov 28, 2018 · 11 comments
Labels
Bug Component: FlatList Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@HaloWang
Copy link

HaloWang commented Nov 28, 2018

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.1
      CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
      Memory: 1.78 GB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 11.2.0 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 19, 23, 25, 26, 27
        Build Tools: 23.0.1, 23.0.3, 25.0.2, 26.0.2, 27.0.3, 28.0.3
        System Images: android-23 | Intel x86 Atom, android-23 | Intel x86 Atom_64, android-23 | Google APIs ARM EABI v7a, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.1 => 16.6.1 
      react-native: 0.57.7 => 0.57.7 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-create-library: 3.1.2
      react-native-git-upgrade: 0.2.7

Description

Using FlatList/SectionList, found FlatList.getItemLayout called too many times.
Even scroll a little distance FlatList will call getItemLayout for whole data, several times, perform bad.

#20467 is closed by bot.

Reproducible Demo

cd Destop && react-native init CrazyFlatList && cd CrazyFlatList && react-native run-ios
// App.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';

const ItemHeight = 15

function _getLargeData() {
  let largeData = []
  for (let index = 0; index < 500; index++) {
    largeData.push(index.toString())
  }
  return largeData
}

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={_getLargeData()}
          renderItem={({ item }) => <ItemView text={item} />}
          keyExtractor={(item, index) => item}
          getItemLayout={(data, index) => {
            //  eg. I can find 'getItemLayout 0' 47 times in render method
            if (index == 0) {
              console.log("getItemLayout " + index)
            }
            return {
              index,
              length: ItemHeight,
              offset: ItemHeight * index,
            }
          }}
        />
      </View>
    );
  }
}

class ItemView extends React.PureComponent {
  render() {
    return <Text style={styles.item}>{this.props.text}</Text>
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  item: {
    height: ItemHeight,
  }
});
@genogeno
Copy link

genogeno commented Dec 6, 2018

The same thing happens to me.

@malacca
Copy link
Contributor

malacca commented Dec 21, 2018

+1

@gsunsnackv
Copy link

@HaloWang @genogeno @malacca Is this only happening on Android 9.0 but not 8.x or 7.x ?
I wonder if this could be the root cause of #22744. FlatList try to load everything regardless if they are visible or not

@genogeno
Copy link

genogeno commented Jan 18, 2019

@gsunsnackv
This also happens to iOS. I gave up using Flatlist and so I used another library for lists.

I used this library. This is high performing when scrolling around 500 items.

https://github.com/Flipkart/recyclerlistview

@gsunsnackv
Copy link

@genogeno
Copy link

No I am not using that. I am using this library.

https://github.com/Flipkart/recyclerlistview

This library I think does not use any flatlist implementation.

@thymikee
Copy link
Contributor

Can confirm the getItemLayout is called with every cell update, which doesn't seem to be right. Will try to investigate this further, but any help is appreciated

@cpojer
Copy link
Contributor

cpojer commented Mar 26, 2019

@thymikee any chance you could send a PR? ;)

@cpojer cpojer removed the Follow Up label Mar 26, 2019
@thymikee
Copy link
Contributor

I have it on my list, but it may take a while :D

@stale
Copy link

stale bot commented Aug 4, 2019

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 4, 2019
@stale
Copy link

stale bot commented Aug 11, 2019

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Aug 11, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Aug 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: FlatList Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

8 participants