FlatList attempts to render each item multiple times

Environment

react-native-cli: 2.0.1 react-native: 0.45.1 node v7.2.0 npm 4.6.1

Target platform: Currently iOS Dev OS: macOS Sierra Xcode 8.3.3

Description

First of, this may be related to #13597 or #11809. However, those are from much earlier versions of RN and they seem to present different symptoms.

I’m using FlatList to render a list. I’ve configured to display only one row at a time by using pagingEnabled={true} (although setting this to false doesn’t fix the issue) and rendering cells that are take up the full size of the parent.

I’ve also set windowSize={2} and initialNumToRender={6}. In my renderItem function, I’m logging every call with console.log.

I’m passing in an array of 1,200 items to the FlatList. When the component loads, I see 6 renderItem calls. Then if I navigate in and out of that scene a couple of times, I’ll see a lot of renderItemCalls starting from 0 all the way to somewhere near the end of the array in increments of 10. i.e. it will print that it rendered 0 through, say, 700, then 0 through 710, etc until it gets to 0 through 1200.

My app is pretty big, so I wanted to isolate the issue. I set up a fresh RN 0.45 app with this index.ios.js

At first, it looked like it was all working as expected. Only 5 renders every time. So I enabled hot reloading. Then I go trigger a reload by saving index.ios.js and that did it. A bunch of renders.

I’m aware that enabling hot reload may have side effects. However, I wasn’t using hot reloading in my other app and it was happening. Perhaps because it has navigation, or something like that.

In the sample code, you’ll see me slicing the array, etc… That was just me testing after the fact, making sure data wasn’t changing unexpectedly.

The sample code was modified, but the essence of what I’m doing in the app is there. Am I using something incorrectly? I’m dealing with lists that are up to 1,500 items. Should I be doing some sort of paging manually?

If I can provide any other information that will help resolve this, I’d be glad to.

Thanks in advance.

[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…

[hramos]

Have you tried reproducing this using Snack? It looks like you should be able to copy much of that sample index.ios.js into a new Snack. That would make it easier for folks to see a repro in action.