React-native: [FlatList] render same dataRow too much every time

[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

[RodrigoCS]

+1, this is happening to me too with SectionList, items re-render multiple times.
This is what I get when I log, items and sections in its render method.

section Botanas
item 0
item 1
item 2
item 3
item 4
item 5
item 6
section Bebidas
item 0
section Botanas
item 0
item 1
item 2
item 3
item 4
item 5
item 6
section Bebidas
item 0
item 1
section Botanas
item 0
item 1
item 2
item 3
item 4
item 5
item 6
section Bebidas
item 0
item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8

This happens on first render and also on scrolling

[SteffenHummel]

same problem on Android

Dev - Environment

React Native version: 0.45.1
Platform: Android
Development Operating System: Linux Mint

[Jakevin]

the same

React Native version: 0.45.1
Platform: Android & iOS
Development Operating System: mac 10.12.5

[fabfre]

we're experiencing the same problem with FlatList

React Native version: 0.44.2
Platform: iOS
Development OS: Mac 10.12

[oea-san]

Happening here too, is there any insights or progress into the matter?

React Native version: 0.44.0
Platform: iOS
Development OS: Mac 10.12.5

[markusekblad]

Happening for us too, with around 300 items my array I get several thousand calls to renderItem even with
initialNumToRender={10}
Same issue if I switch to a SectionList as well.

React Native version: 0.46.4
Platform: iOS and Android
Development OS: Mac 10.12.5

[markusekblad]

Upgrading to React Native 0.47.1 seems to have fixed it for me, it still seems to call renderItem quite a lot but there's a huge difference in performance now.

[artshin]

Same thing for me. renderItem gets called for items that are clearly outside of the renderable area, setting initialNumToRender doesn't help reduce the number of render calls in any way.
FlatList essentially became a ScrollView, but worse.

React Native version: 0.47.1
Platform: iOS
Development OS: Mac 10.12.15

[artshin]

After some testing and debugging I managed to get this fixed by explicitly setting windowSize property to a fixed reasonable value.

[cbjs]

same.

[gunnarblom]

The same problem for me. The fundamental bug in this is that it is re-rendering everything for each extra 10 items. windowSize just reduces front loading and therefor just limit the symptoms a bit at the expense of user experience.

No official confirmation of this bug yet?

React Native version: 0.48.1
Platform: iOS
Development OS: Mac 10.12.6

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[lasuax]

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

[joaovpmamede]

@lasuax did you try with the latest RN version?

[paulpopiel]

Experiencing the exact same issue with SectionList in "react-native": "0.50.3",

Can also replicate with a simple sample project in "react-native": "0.51.0"

[cbarlow1993]

Experiencing the exact same using "react-native": "0.45.1".

[m4r00p]

Same with 0.51 ;/

[kelset]

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.

(possibly related: https://github.com/facebook/react-native/issues/14348)

[mCodex]

I'm experiencing this issue too, even in RN 0.52.2. Has anyone found a solution?

[ishigamii]

Same issue any solution for this ?

[brentvatne]

https://facebook.github.io/react-native/docs/flatlist.html

use PureComponent for your list items as the docs suggest

[hoangtrinh96]

srsly still haven't had a solution for this ?

[mikaelrosquist]

Experiencing the same issue with RN 0.54.2.
@brentvatne Using PureComponent does not solve the issue.

[dougsleite]

Is there any alternative/recommendation while this is not fixed?

[VitaliiK91]

Had same issue. I had FlatList wrapped in a ScrollView, removing ScrollView wrapper fixed the problem

[tonywump]

Same issue here.
"react": "^16.3.1",
"react-native": "0.54.1"

[hoangtrinh96]

Hey everyone, I got this issue fixed, I don't know why PureComponent does not fix this, but you just need to implement the shouldComponentUpdated method in your item component, try to check whether nextProps is still the same with the oldProps, then return false.

[mtx62]

Same issue here.
"react": "^16.3.0-alpha.1",
"react-native": "^0.54.2",

[unmec]

"react-native": "^0.52.2"
Same here, will try @hoangtrinh96 suggestion

[alainib]

same with "react-native": "^0.55.2

any solution ?

[johnckendall]

Confirming this behavior in:
"react": "16.3.1",
"react-native": "0.55.3",

[kelset]

@losheredos let me be extremely clear here: that language is NOT tolerated here. I'm going to remove that comment & report you.

[ferrannp]

Hello there 👋 this issue has been reported for an old version of React Native. Ideally we'd like everyone to be using 0.59 (see the awesome changes it brought) but we know updating can be a pain. We are going to close this issue because it's from a version before 0.57, which is really old.

But please, if it's actually still an issue with 0.59 please comment below and we can reopen it 😊