FlatList renders its items many times

[josvos]

When I render a FlatList with a simple static data array (this does not change!) like [{id: 1}, {id: 2}, ...], the first time FlatList is rendered it calls renderItem multiple times for many items. For example, it first renders the first 10 items, then the first 20 (first 10 second time!), then the first 30, etc. Dependent on container size and whether you specify pageSize and initialNumToRender and what values you pt here, I've seen the first item being rendered up to 30 (!) times.

I can't figure out why this is happening. The component returning the FlatList is rendered only once. I'll try to isolate a code example, but maybe the problem is already known or easy to reproduce?

This is with react-native 0.43.3 on Android.

[andreialecu]

Possibly related: #11809 (comment)

[navid94]

You should try to implement https://facebook.github.io/react-native/docs/virtualizedlist.html#shoulditemupdate to make sure that items are not being update uselessly. That said if I place a console.log(info.index) inside of renderItem, it does print multiple time even if the item is already rendered, but it doesn't have performance impact since I implemented shouldItemUpdate.

[sahrens]

Actually we're deprecating shouldItemUpdate - you should just make sure your items extend React.PureComponent or implement your own shouldComponentUpdate. Some discussion in the v0.44 docs here: http://facebook.github.io/react-native/releases/0.44/docs/flatlist.html

[sahrens]

Also note that the re-rendering shouldn't be an issue (assuming you implement the appropriate perf optimizations in your code) because it doesn't render items outside the render window so the number of items rendered should be well bounded. If this still seems too slow, you can reduce the windowSize prop.

[Symous]

Hi,I am also facing this issuse,any solution here now? :D

[koloritcm]

@sahrens I've seen multiple reports (links below) on this were FlatList re-renders everything from the first row for each extra 10 rows. It renders rows 1-10, 1-20, 1-30, 1-40, 1-50, 1-60, 1-70...1-140 in my case which means the first rows are rendered 14(!) times (with default window size) which I guess isn't the expected behaviour?

And changing the window size just hides the symptom at the expense of user experience / fast loading.

#14772
#13597
#14528

[sahrens]

You need to inspect your own code and verify that your components have implemented shouldComponentUpdate correctly, or that you are using PureComponent appropriately. If you can verify that everything in your own code is working correctly and you are still seeing performance issues with production builds on real devices, please open an issue with details and we can look into it.

[edo1493]

I see this too. My renderItem gets called for every element on scrolling. I have PureComponents in place and have set a windowSize on my Flatlist.

[sahrens]

If PureComponent is working, then renderItem will still get called of course but it shouldn't matter because it should be very fast. Are you actually seeing performance problems? What windowSize did you set?

[edo1493]

I used the default. I was getting VirtualizedList performance warnings cause I was consoling out the row to check if it was getting rendered. I didn't know that was expected behaviour.

[losheredos]

Its so annoying problem, anyone know how to solve it?

[losheredos]

Guys I think I solved it, I'm not sure if everyone has this problem because of same reason but.. let me tell you.

So problem was caused by backend.

I was creating array in backend before sending to react-native, and there I was doing like this:

$new = new Collection();

$new[] = array('message' => $message->message);
$new[] = array('id' => $message->id);
$new[] = array('sender' => 'Sender: System');

return $new;

and after I get the array to react-native I was trying to render in flatlist. I noticed that it renders as many as I added new array(), so I fixed the problem by doing:

$new[] = array('message' => $message->message, 'key' => strval($message->id), 'sender' => 'Sender: System');

after I have changed my backend codes, problem is solved! Hope it can help you as well..