Skip to content

Commit 2161f92

Browse files
GantManfacebook-github-bot
authored andcommitted
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 facebook#15400 Differential Revision: D5579483 Pulled By: sahrens fbshipit-source-id: 2cc2488b6332db4f4d644c67f180088d3a5874a8
1 parent 5d79b26 commit 2161f92

File tree

2 files changed

+5
-0
lines changed

2 files changed

+5
-0
lines changed

Libraries/Lists/FlatList.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ type OptionalProps<ItemT> = {
107107
* {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
108108
* )}
109109
*
110+
* Adding `getItemLayout` can be a great performance boost for lists of several hundred items.
110111
* Remember to include separator length (height or width) in your offset calculation if you
111112
* specify `ItemSeparatorComponent`.
112113
*/

docs/Performance.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,10 @@ Use the new [`FlatList`](docs/flatlist.html) or [`SectionList`](docs/sectionlist
9191
Besides simplifying the API, the new list components also have significant performance enhancements,
9292
the main one being nearly constant memory usage for any number of rows.
9393

94+
If your [`FlatList`](docs/flatlist.html) is rendering slow, be sure that you've implemented
95+
[`getItemLayout`](https://facebook.github.io/react-native/docs/flatlist.html#getitemlayout) to
96+
optimize rendering speed by skipping measurement of the rendered items.
97+
9498
### JS FPS plunges when re-rendering a view that hardly changes
9599

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

0 commit comments

Comments
 (0)