From de0d7cfb79c7f4011d4b6748b1afc656d33fd5ac Mon Sep 17 00:00:00 2001
From: Spencer Ahrens <sahrens@fb.com>
Date: Mon, 13 May 2019 14:30:39 -0700
Subject: [PATCH] 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
---
 Libraries/Lists/VirtualizedList.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js
index 65944654a872ad..b896b3b5fb76b4 100644
--- a/Libraries/Lists/VirtualizedList.js
+++ b/Libraries/Lists/VirtualizedList.js
@@ -52,7 +52,7 @@ type RequiredProps = {
   // `VirtualizedSectionList`'s props.
   renderItem: $FlowFixMe<renderItemType>,
   /**
-   * The default accessor functions assume this is an Array<{key: string}> but you can override
+   * The default accessor functions assume this is an Array<{key: string} | {id: string}> but you can override
    * getItem, getItemCount, and keyExtractor to handle any type of index-based data.
    */
   data?: any,
@@ -264,7 +264,7 @@ type State = {first: number, last: number};
  *   offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see
  *   blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
  *   and we are working on improving it behind the scenes.
- * - By default, the list looks for a `key` prop on each item and uses that for the React key.
+ * - By default, the list looks for a `key` or `id` prop on each item and uses that for the React key.
  *   Alternatively, you can provide a custom `keyExtractor` prop.
  *
  */
@@ -435,6 +435,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       if (item.key != null) {
         return item.key;
       }
+      if (item.id != null) {
+        return item.id;
+      }
       _usedIndexForKey = true;
       if (item.type && item.type.displayName) {
         _keylessItemComponentName = item.type.displayName;
@@ -849,7 +852,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       );
       if (!this._hasWarned.keys && _usedIndexForKey) {
         console.warn(
-          'VirtualizedList: missing keys for items, make sure to specify a key property on each ' +
+          'VirtualizedList: missing keys for items, make sure to specify a key or id property on each ' +
             'item or provide a custom keyExtractor.',
           _keylessItemComponentName,
         );