Skip to content

Commit de0d7cf

Browse files
sahrensfacebook-github-bot
authored andcommitted
Add default support for item.id as key in FlatList/VList keyExtractor
Summary: [JS] [ENHANCEMENT] - Add default support for `item.id` as key in FlatList/VList `keyExtractor` Reviewed By: lunaleaps Differential Revision: D15322879 fbshipit-source-id: 4e03896f72afb05542efc7e960bc29bb07f0178b
1 parent 0c11d8d commit de0d7cf

File tree

1 file changed

+6
-3
lines changed

1 file changed

+6
-3
lines changed

Libraries/Lists/VirtualizedList.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ type RequiredProps = {
5252
// `VirtualizedSectionList`'s props.
5353
renderItem: $FlowFixMe<renderItemType>,
5454
/**
55-
* The default accessor functions assume this is an Array<{key: string}> but you can override
55+
* The default accessor functions assume this is an Array<{key: string} | {id: string}> but you can override
5656
* getItem, getItemCount, and keyExtractor to handle any type of index-based data.
5757
*/
5858
data?: any,
@@ -264,7 +264,7 @@ type State = {first: number, last: number};
264264
* offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see
265265
* blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
266266
* and we are working on improving it behind the scenes.
267-
* - By default, the list looks for a `key` prop on each item and uses that for the React key.
267+
* - By default, the list looks for a `key` or `id` prop on each item and uses that for the React key.
268268
* Alternatively, you can provide a custom `keyExtractor` prop.
269269
*
270270
*/
@@ -435,6 +435,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
435435
if (item.key != null) {
436436
return item.key;
437437
}
438+
if (item.id != null) {
439+
return item.id;
440+
}
438441
_usedIndexForKey = true;
439442
if (item.type && item.type.displayName) {
440443
_keylessItemComponentName = item.type.displayName;
@@ -849,7 +852,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
849852
);
850853
if (!this._hasWarned.keys && _usedIndexForKey) {
851854
console.warn(
852-
'VirtualizedList: missing keys for items, make sure to specify a key property on each ' +
855+
'VirtualizedList: missing keys for items, make sure to specify a key or id property on each ' +
853856
'item or provide a custom keyExtractor.',
854857
_keylessItemComponentName,
855858
);

0 commit comments

Comments
 (0)