From 2161f92aaf37e126c6906e7ae6202d196b72648c Mon Sep 17 00:00:00 2001 From: Gant Laborde Date: Mon, 7 Aug 2017 17:54:43 -0700 Subject: [PATCH] Add pertinent info for fresh flatlisters Summary: I just worked with a fellow dev who was switching to flatlist and ended up pretty surprised at the performance drop. The measurement had an exponential bridge saturation, causing flatlist to lose to a scrollview! We knew something was up, but a little note in the docs would have helped. Closes https://github.com/facebook/react-native/pull/15400 Differential Revision: D5579483 Pulled By: sahrens fbshipit-source-id: 2cc2488b6332db4f4d644c67f180088d3a5874a8 --- Libraries/Lists/FlatList.js | 1 + docs/Performance.md | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js index 5a98157bd..9cc85f24e 100644 --- a/Libraries/Lists/FlatList.js +++ b/Libraries/Lists/FlatList.js @@ -107,6 +107,7 @@ type OptionalProps = { * {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index} * )} * + * Adding `getItemLayout` can be a great performance boost for lists of several hundred items. * Remember to include separator length (height or width) in your offset calculation if you * specify `ItemSeparatorComponent`. */ diff --git a/docs/Performance.md b/docs/Performance.md index 2d21d446f..c23c06812 100644 --- a/docs/Performance.md +++ b/docs/Performance.md @@ -91,6 +91,10 @@ Use the new [`FlatList`](docs/flatlist.html) or [`SectionList`](docs/sectionlist Besides simplifying the API, the new list components also have significant performance enhancements, the main one being nearly constant memory usage for any number of rows. +If your [`FlatList`](docs/flatlist.html) is rendering slow, be sure that you've implemented +[`getItemLayout`](https://facebook.github.io/react-native/docs/flatlist.html#getitemlayout) to +optimize rendering speed by skipping measurement of the rendered items. + ### JS FPS plunges when re-rendering a view that hardly changes If you are using a ListView, you must provide a `rowHasChanged` function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check.