fix: add rowKey for List

README.md

@@ -149,6 +149,20 @@ This may be used to (re)scroll a row into view.</p>
       <td>overscanCount</td>
       <td><p>How many additional rows to render outside of the visible area.
 This can reduce visual flickering near the edges of a list when scrolling.</p>
+</td>
+    </tr>
+    <tr>
+      <td>rowKey</td>
+      <td><p>By default, lists will use an item&#39;s index as its
+<a href="https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key">key</a>.
+This is okay if:</p>
+<ul>
+<li>Your collections of items is never sorted or modified</li>
+<li>Your item renderer is not stateful and does not extend
+<code>PureComponent</code></li>
+</ul>
+<p>If your list does not satisfy the above constraints,
+use this property to specify your own keys for items.</p>
 </td>
     </tr>
     <tr>

lib/components/list/List.tsx

@@ -37,6 +37,7 @@ export function List<
   rowComponent: RowComponentProp,
   rowCount,
   rowHeight: rowHeightProp,
+  rowKey,
   rowProps: rowPropsUnstable,
   tagName = "div" as TagName,
   style,
@@ -185,7 +186,7 @@ export function List<
               "aria-setsize": rowCount,
               role: "listitem"
             }}
-            key={index}
+            key={rowKey ? rowKey(index, rowProps) : index}
             index={index}
             style={{
               position: "absolute",
@@ -206,6 +207,7 @@ export function List<
     getCellBounds,
     isDynamicRowHeight,
     rowCount,
+    rowKey,
     rowProps,
     startIndexOverscan,
     stopIndexOverscan

lib/components/list/types.ts

@@ -134,6 +134,22 @@ export type ListProps<
     | ((index: number, cellProps: RowProps) => number)
     | DynamicRowHeight;
 
+  // TODO add documentation, examples, tests, whatever else,
+  // and implement this for grid.
+  // Also check whether the `PureComponent` part still applies.
+  /**
+   * By default, lists will use an item's index as its
+   * [key](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).
+   * This is okay if:
+   * - Your collections of items is never sorted or modified
+   * - Your item renderer is not stateful and does not extend
+   *   `PureComponent`
+   *
+   * If your list does not satisfy the above constraints,
+   * use this property to specify your own keys for items.
+   */
+  rowKey?: (index: number, data: RowProps) => React.Key;
+
   /**
    * Additional props to be passed to the row-rendering component.
    * List will automatically re-render rows when values in this object change.

public/generated/docs/List.json

@@ -135,6 +135,19 @@
       "name": "rowHeight",
       "required": true
     },
+    "rowKey": {
+      "description": [
+        {
+          "content": "<p>By default, lists will use an item's index as its\n<a href=\"https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key\">key</a>.\nThis is okay if:</p>\n<ul>\n<li>Your collections of items is never sorted or modified</li>\n<li>Your item renderer is not stateful and does not extend\n<code>PureComponent</code></li>\n</ul>\n"
+        },
+        {
+          "content": "<p>If your list does not satisfy the above constraints,\nuse this property to specify your own keys for items.</p>\n"
+        }
+      ],
+      "html": "<div><span class=\"tok-variableName\"><span class=\"tok-propertyName\">rowKey</span></span><span class=\"tok-operator\">?</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">index</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">number</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">data</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">RowProps</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">=&#62;</span><span class=\"\"> </span><span class=\"tok-variableName\">Key</span></div>",
+      "name": "rowKey",
+      "required": false
+    },
     "rowProps": {
       "description": [
         {