Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[FlatList] render same dataRow too much every time

See original GitHub issue

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

Issue Analytics

State:
Created 6 years ago
Reactions:25
Comments:33 (1 by maintainers)

Top GitHub Comments

10reactions

lasuaxcommented, Nov 27, 2017

It doesn’t seem to be fixed yet. Can we open it?

4reactions

kelsetcommented, Jan 19, 2018

This is happening to me too, I’ll try to bring it up to core.

Even when using

        initialNumToRender={5}
        maxToRenderPerBatch={4}
        updateCellsBatchingPeriod={50}
        windowSize={5}
        onEndReachedThreshold={5}

Options in my SectionList, renderItem gets called xTimes too many.

Currently testing on an Android device on 7.x, rn 0.50.4. We’ll upgrade (pro) today to 52, I’ll let you know if it gets better with the newer version.

Top Results From Across the Web

render same dataRow too much every time - Stack Overflow

If your data prop is getting updated from state variable everytime state changes re-rendering will occur.

Optimizing Flatlist Configuration - React Native

Move out the renderItem function to the outside of render function, so it won't recreate itself each time render function called.

React Native FlatList - Getting Your React Native Basics Right

Dynamically rendering a data collection will always be important as you go about your software development journey. FlatList is beneficial in ...

How i can limit the items in the FlatList and add load more?

You Can add the slice(start,end) method while fetching jsondata in datasource. This trick may solve your problem. dataPosts: responseJson.slice(0,10) replace ...

A guide to optimizing Flatlists in React Native. - Obytes

Flatlist represents a large list of data, it is very commonly used in mobile apps , yet it is very tricky, and performance...