FlatList execute renderItem 2 or 3 times per FlatList render?

[andyhuai]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.3
CPU: x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
Memory: 70.11 MB / 8.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 9.5.0 - /usr/local/bin/node
Yarn: 1.9.4 - ~/.yarn/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
Android SDK:
Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3
API Levels: 21, 22, 23, 24, 25, 26, 27
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 9.2/9C40b - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
react-native-cli: 2.0.1

Description

FlatList execute renderItem 2 or 3 times per FlatList render?
if the data length > 10 ,renderItem may execute 3 times else 2 times, why?
Is there something wrong in my code?

Reproducible Demo

logs

2App.js:35 render-----
App.js:47 render_item: {"key":"Devin"}0
App.js:47 render_item: {"key":"Jackson"}1
App.js:47 render_item: {"key":"James"}2
App.js:47 render_item: {"key":"Joel"}3
App.js:47 render_item: {"key":"John"}4
App.js:47 render_item: {"key":"Jillian"}5
App.js:47 render_item: {"key":"Jimmy"}6
App.js:47 render_item: {"key":"Julie"}7
App.js:47 render_item: {"key":"Devin1"}8
App.js:47 render_item: {"key":"Jackson1"}9
App.js:47 render_item: {"key":"Devin"}0
App.js:47 render_item: {"key":"Jackson"}1
App.js:47 render_item: {"key":"James"}2
App.js:47 render_item: {"key":"Joel"}3
App.js:47 render_item: {"key":"John"}4
App.js:47 render_item: {"key":"Jillian"}5
App.js:47 render_item: {"key":"Jimmy"}6
App.js:47 render_item: {"key":"Julie"}7
App.js:47 render_item: {"key":"Devin1"}8
App.js:47 render_item: {"key":"Jackson1"}9
App.js:47 render_item: {"key":"James1"}10

code

import { FlatList, StyleSheet, Text, View } from 'react-native';

export default class App extends Component {

  state = {
    data: []
  }

  componentDidMount() {
    this.setState({
      data: [
        {key: 'Devin'},
        {key: 'Jackson'},
        {key: 'James'},
        {key: 'Joel'},
        {key: 'John'},
        {key: 'Jillian'},
        {key: 'Jimmy'},
        {key: 'Julie'},
        {key: 'Devin1'},
        {key: 'Jackson1'},
        {key: 'James1'},
        // {key: 'Joel1'},
        // {key: 'John1'},
        // {key: 'Jillian1'},
        // {key: 'Jimmy1'},
        // {key: 'Julie1'},

      ]
    })
  }

  render() {
    console.log("render-----")
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.data}
          renderItem={this._renderItem}
        />
      </View>
    );
  }

  _renderItem=({item, index})=> {
    console.log("render_item:",JSON.stringify(item) + index)
    return <Text style={styles.item}>{item.key}</Text>
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

[andyhuai]

Any one have the same question?
need help~

[andyhuai]

related to #14528

[shubhang93]

Yes, this bug exists in React Native 0.55.4 as well, One of the things you can do to prevent this behaviour is wrap your Render Item this way

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

Even a shouldComponentUpdate should work, BTW I use mobx and I annotate my component with @observer which takes care of the shouldComponentUpdate for me.

This solves the issue, but your render Item is still fired multiple times, only advantage is that your actual Component will not be re-rendered for those extra calls to renderItem, due to PureComponent implementation. Can anyone confirm if renderItem is fired multiple times for previously rendered rows intentionally or is this a bug. Forgive me for I really do not know how FlatList is implemented from the ground up, but I am guessing, the renderItem callback should only be called once for each item.

[Fokey]

@kelset Could you consider reopening #14528? It seems like there is still a large issue here and now it feels hidden by locking down the original thread. I'm still getting this error along with everyone else most likely.

[geekdreamzz]

I recreated the issue in this snack. https://snack.expo.io/B1KoX-EUN - I confirmed you can use shouldComponentUpdate(nextProps, nextState) to diff this.state or this.props and return true/false - https://reactjs.org/docs/react-component.html#shouldcomponentupdate docs say this callback should be used only for optimization which is what we're doing here.

[grabbou]

As @geeklevel1000 pointed out, I don't think this is really an issue. The number of times the items are actually rendered is implementation detail of FlatList. As long as you don't have any performance problems, you should not be worried. The same code runs inside Facebook applications where they don't have major problems out of it.

As others suggested above and in another issue (#14528 (comment)), use shouldComponentUpdate or PureComponent to guard against it.

[AGPatel]

I have data
[{1: {key: 'row1'}},{2: {key: 'row2'}},{3: {key: 'row3'}},{4: {key: 'row4'}},{5: {key: 'row5'}}]
or

[
    {
        1:{
            key:'row1'
        }
    },
    {
        2:{
            key:'row2'
        }
    },
    {
        3:{
            key:'row3'
        }
    },
    {
        4:{
            key:'row4'
        }
    },
    {
        5:{
            key:'row5'
        }
    },
]

how can i render this type of data in Flatlist

<FlatList
    data={[{ 1: { key: 'row1' } }, { 2: { key: 'row2' } }, { 3: { key: 'row3' } }, { 4: { key: 'row4' } }, { 5: { key: 'row5' } }]}
    renderItem={({item,index}) =>
                <TouchableHighlight>
                    <View style={styles.row}>
                        <Text> ...how can i fetch data..... </Text>
                    </View>
                </TouchableHighlight>}
    enableEmptySections={true}
    keyExtractor={(item, index) => index}
/>

[matthew-dean]

As long as you don't have any performance problems, you should not be worried.

We're using an environment where JavaScript has no JIT, so the multiple renderItem calls per item are definitely causing a performance hit.