FlatList attempts to render each item multiple times

[thatjuan]

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.

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

[thatjuan]

Snack link

[thatjuan]

Should i be looking at splitting my data array and doing windowing/paging manually?

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[boerkey]

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..