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

ipenpen · 2017-06-15T06:53:17Z

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

The text was updated successfully, but these errors were encountered:

RodrigoCS · 2017-06-28T17:39:01Z

+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 · 2017-06-29T05:51:42Z

same problem on Android

Dev - Environment

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

Jakevin · 2017-07-03T10:58:55Z

the same

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

fabfre · 2017-07-03T16:22:30Z

we're experiencing the same problem with FlatList

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

oea-san · 2017-07-12T11:52:13Z

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 · 2017-08-07T13:50:53Z

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 · 2017-08-08T12:45:18Z

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 · 2017-08-10T15:43:13Z

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 · 2017-08-10T18:51:36Z

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

cbjs · 2017-08-16T05:05:12Z

same.

koloritcm · 2017-09-05T19:37:28Z

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 · 2017-11-04T19:55:01Z

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 · 2017-11-27T13:31:37Z

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

joaovpmamede · 2017-12-12T22:20:46Z

@lasuax did you try with the latest RN version?

paulpopiel · 2017-12-19T08:57:49Z

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 · 2017-12-27T00:04:54Z

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

m4r00p · 2018-01-16T14:14:42Z

Same with 0.51 ;/

kelset · 2018-01-19T09:42:20Z

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: #14348)

mCodex · 2018-02-05T18:05:44Z

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

ishigamii · 2018-02-12T11:05:07Z

Same issue any solution for this ?

brentvatne · 2018-02-19T18:33:46Z

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

use PureComponent for your list items as the docs suggest

hoangtrinh96 · 2018-03-22T16:09:56Z

srsly still haven't had a solution for this ?

mikaelrosquist · 2018-04-04T08:17:45Z

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

dougsleite · 2018-04-04T13:42:56Z

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

VitaliiK91 · 2018-04-05T22:29:49Z

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

tonywump · 2018-04-08T09:21:48Z

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

hoangtrinh96 · 2018-04-09T02:02:04Z

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 · 2018-04-09T13:37:05Z

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

unmec · 2018-04-11T09:44:01Z

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

alainib · 2018-04-27T09:39:04Z

same with "react-native": "^0.55.2

any solution ?

johnckendall · 2018-04-27T20:46:49Z

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

kelset · 2018-05-09T10:28:08Z

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

ferrannp · 2019-03-19T15:09:44Z

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 😊

ipenpen changed the title ~~FlatList render same dataRow too much every time~~ [BUG]FlatList render same dataRow too much every time Jun 15, 2017

hramos changed the title ~~[BUG]FlatList render same dataRow too much every time~~ [FlatList] render same dataRow too much every time Jun 15, 2017

koloritcm mentioned this issue Sep 5, 2017

FlatList renders its items many times #13597

Closed

stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Nov 4, 2017

stale bot closed this as completed Nov 11, 2017

hramos reopened this Jan 19, 2018

stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 19, 2018

hramos added the Lists label Mar 8, 2018

kelset mentioned this issue Mar 15, 2018

FlatList's renderItem renders twice, instead of once #18396

Closed

facebook deleted a comment from losheredos May 9, 2018

facebook locked as too heated and limited conversation to collaborators May 9, 2018

react-native-bot added the ❔Needs More Information label May 15, 2018

facebook deleted a comment from react-native-bot May 15, 2018

facebook deleted a comment from react-native-bot May 16, 2018

react-native-bot removed the ❔Needs More Information label May 18, 2018

hramos added Component: FlatList and removed 🔶Lists labels Jan 25, 2019

react-native-bot added the Bug Report label Jan 26, 2019

hramos removed the Bug Report label Feb 6, 2019

ferrannp closed this as completed Mar 19, 2019

react-native-bot added the Bug label May 4, 2019

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 20, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ipenpen commented Jun 15, 2017

RodrigoCS commented Jun 28, 2017

SteffenHummel commented Jun 29, 2017

Jakevin commented Jul 3, 2017

fabfre commented Jul 3, 2017

oea-san commented Jul 12, 2017

markusekblad commented Aug 7, 2017

markusekblad commented Aug 8, 2017

artshin commented Aug 10, 2017 •

edited

Loading

artshin commented Aug 10, 2017

cbjs commented Aug 16, 2017

koloritcm commented Sep 5, 2017

stale bot commented Nov 4, 2017

lasuax commented Nov 27, 2017

joaovpmamede commented Dec 12, 2017

paulpopiel commented Dec 19, 2017 •

edited

Loading

cbarlow1993 commented Dec 27, 2017

m4r00p commented Jan 16, 2018

kelset commented Jan 19, 2018

mCodex commented Feb 5, 2018

ishigamii commented Feb 12, 2018

brentvatne commented Feb 19, 2018

hoangtrinh96 commented Mar 22, 2018

mikaelrosquist commented Apr 4, 2018 •

edited

Loading

dougsleite commented Apr 4, 2018

VitaliiK91 commented Apr 5, 2018

tonywump commented Apr 8, 2018

hoangtrinh96 commented Apr 9, 2018

mtx62 commented Apr 9, 2018

unmec commented Apr 11, 2018

alainib commented Apr 27, 2018

johnckendall commented Apr 27, 2018

kelset commented May 9, 2018

ferrannp commented Mar 19, 2019

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

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

Comments

ipenpen commented Jun 15, 2017

Dev - Environment

Sample Code

Problems

Sample Code's console log

RodrigoCS commented Jun 28, 2017

SteffenHummel commented Jun 29, 2017

Jakevin commented Jul 3, 2017

fabfre commented Jul 3, 2017

oea-san commented Jul 12, 2017

markusekblad commented Aug 7, 2017

markusekblad commented Aug 8, 2017

artshin commented Aug 10, 2017 • edited Loading

artshin commented Aug 10, 2017

cbjs commented Aug 16, 2017

koloritcm commented Sep 5, 2017

stale bot commented Nov 4, 2017

lasuax commented Nov 27, 2017

joaovpmamede commented Dec 12, 2017

paulpopiel commented Dec 19, 2017 • edited Loading

cbarlow1993 commented Dec 27, 2017

m4r00p commented Jan 16, 2018

kelset commented Jan 19, 2018

mCodex commented Feb 5, 2018

ishigamii commented Feb 12, 2018

brentvatne commented Feb 19, 2018

hoangtrinh96 commented Mar 22, 2018

mikaelrosquist commented Apr 4, 2018 • edited Loading

dougsleite commented Apr 4, 2018

VitaliiK91 commented Apr 5, 2018

tonywump commented Apr 8, 2018

hoangtrinh96 commented Apr 9, 2018

mtx62 commented Apr 9, 2018

unmec commented Apr 11, 2018

alainib commented Apr 27, 2018

johnckendall commented Apr 27, 2018

kelset commented May 9, 2018

ferrannp commented Mar 19, 2019

artshin commented Aug 10, 2017 •

edited

Loading

paulpopiel commented Dec 19, 2017 •

edited

Loading

mikaelrosquist commented Apr 4, 2018 •

edited

Loading