diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js index 5a98157bd0..9cc85f24ec 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 2d21d446fc..c23c06812d 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.