Skip to content

[FlatList] render same dataRow too much every time #14528

@ipenpen

Description

@ipenpen

Dev - Environment

  • React Native version: 0.45
  • Platform: iOS
  • Development Operating System: macOS
  • Build tools: Xcode

Sample Code

class App extends Component {
  render() {
    return(
      <FlatList
        data={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]}
        renderItem={({index})=>{
          console.log('renderItem', index);
            return <View></View>
        }}
      />
    );
  }
}

Problems

  • if data.length <= 10, it is ok, but
  • if data.length is bigger than 10, with each item in data renderItem() is called more than 1 time
  • the number of calling renderItem() of each data is near: (1 + (data.length - 10) / 10)
  • expected he number of calling renderItem() of each data is 1, not (1 + (data.length - 10) / 10)
  • time for rendering is too long and it lock others action like click, etc...

Sample Code's console log

renderItem 0
renderItem 1
renderItem 2
renderItem 3
renderItem 4
renderItem 5
renderItem 6
renderItem 7
renderItem 8
renderItem 9
renderItem 0

// from here render again
renderItem 1
renderItem 2
renderItem 3
renderItem 4
renderItem 5
renderItem 6
renderItem 7
renderItem 8
renderItem 9
renderItem 10
renderItem 11
renderItem 12
renderItem 13
renderItem 14
renderItem 15
renderItem 16
renderItem 17
renderItem 18
renderItem 19

// and render again
renderItem 0
renderItem 1
renderItem 2
renderItem 3
renderItem 4
renderItem 5
renderItem 6
renderItem 7
renderItem 8
renderItem 9
renderItem 10
renderItem 11
renderItem 12
renderItem 13
renderItem 14
renderItem 15
renderItem 16
renderItem 17
renderItem 18
renderItem 19
renderItem 20
renderItem 21
renderItem 22

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions