Avoid sticky header scans for non-sticky VirtualizedLists (#57210)

Summary:
`VirtualizedList._createRenderMask` always did the sticky-header lookup, even when there were no sticky headers. For a large list scrolled far from the top, that meant walking backward from the first visible item toward index 0 on every render-mask update.

This changes that path to:

- skip the lookup when `stickyHeaderIndices` is missing or empty
- when sticky headers exist, scan the sticky header indices and pick the closest one above the viewport
- keep `ListHeaderComponent` offset handling and integer-index behavior

## Changelog:

[GENERAL][CHANGED] - Speed up VirtualizedList render-mask creation for large lists by avoiding the old backward sticky-header scan when sticky headers are missing or sparse.

## Affected components

This is inside `VirtualizedList`, so the affected callers are:

- `VirtualizedList`
- `FlatList`, because it renders through `VirtualizedList`
- `VirtualizedSectionList` / `SectionList`, because section lists also render through this path

`stickyHeaderIndices` does not need to be set to get the no-sticky win. A normal `FlatList` with no sticky headers still used to pay the backward scan. With this change, that case exits before the sticky-header helper runs.

When `stickyHeaderIndices` is set, the lookup changes from scanning item indices back toward 0 to scanning only the sticky header index array. The size of the win then depends on how many sticky headers are configured.

## Benchmark

Benchmark command:

```sh
yarn fantom --benchmarks packages/react-native/Libraries/Lists/__tests__/VirtualizedList-stickyHeaders-benchmark-itest.js --runInBand
```

Fantom Hermes benchmark, 100 samples per case. Values below are median latency for `VirtualizedList._createRenderMask` when the viewport is near the end of the list.

Per-call values are under 1 second, so they stay in milliseconds. For 1,000 render-mask updates, values over 1 second are shown in seconds.

| Case | One update before | One update after | Speedup | 1,000 updates before | 1,000 updates after |
| --- | ---: | ---: | ---: | ---: | ---: |
| 100k rows, no sticky headers | 2.664 ms | 0.0034 ms | 780x | 2.66 s | 3.42 ms |
| 100k rows, empty sticky headers | 2.632 ms | 0.0033 ms | 800x | 2.63 s | 3.29 ms |
| 100k rows, one top sticky header | 2.705 ms | 0.0054 ms | 499x | 2.71 s | 5.42 ms |
| 250k rows, no sticky headers | 6.543 ms | 0.0035 ms | 1,892x | 6.54 s | 3.46 ms |
| 250k rows, empty sticky headers | 6.579 ms | 0.0033 ms | 2,024x | 6.58 s | 3.25 ms |
| 250k rows, one top sticky header | 6.796 ms | 0.0053 ms | 1,294x | 6.80 s | 5.25 ms |
| 500k rows, no sticky headers | 13.173 ms | 0.0033 ms | 4,002x | 13.17 s | 3.29 ms |
| 500k rows, empty sticky headers | 13.073 ms | 0.0033 ms | 3,997x | 13.07 s | 3.27 ms |
| 500k rows, one top sticky header | 13.444 ms | 0.0054 ms | 2,511x | 13.44 s | 5.35 ms |
| 750k rows, no sticky headers | 19.524 ms | 0.0033 ms | 6,008x | 19.52 s | 3.25 ms |
| 750k rows, empty sticky headers | 19.572 ms | 0.0033 ms | 6,022x | 19.57 s | 3.25 ms |
| 750k rows, one top sticky header | 20.304 ms | 0.0054 ms | 3,778x | 20.30 s | 5.37 ms |
| 1m rows, no sticky headers | 26.190 ms | 0.0033 ms | 8,058x | 26.19 s | 3.25 ms |
| 1m rows, empty sticky headers | 26.039 ms | 0.0033 ms | 8,012x | 26.04 s | 3.25 ms |
| 1m rows, one top sticky header | 26.855 ms | 0.0053 ms | 5,075x | 26.86 s | 5.29 ms |

This benchmark is intentionally focused on this helper. It does not claim the whole app or whole list render becomes thousands of times faster. It shows that this hot helper is no longer proportional to the scroll distance from the top of the list.

Pull Request resolved: #57210

Test Plan:
```sh
yarn jest packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js packages/virtualized-lists/Lists/__tests__/VirtualizedSectionList-test.js packages/react-native/Libraries/Lists/__tests__/FlatList-test.js --runInBand
```

Passed: 3 suites, 101 tests, 1 skipped, 76 snapshots.

```sh
yarn fantom packages/react-native/Libraries/Lists/__tests__/FlatList-itest.js packages/react-native/Libraries/Lists/__tests__/SectionList-itest.js --runInBand
```

Passed: 2 suites, 64 tests.

```sh
yarn flow check
```

Passed: no errors.

```sh
./node_modules/.bin/eslint packages/virtualized-lists/Lists/VirtualizedList.js packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js packages/react-native/Libraries/Lists/__tests__/VirtualizedList-stickyHeaders-benchmark-itest.js
```

Passed.

```sh
git diff --check
```

Passed.

Reviewed By: javache

Differential Revision: D108890210

Pulled By: Abbondanzo

fbshipit-source-id: 7548ba29d77ac14a609665356ab7d09662820abe

Author: tarikfp

packages/react-native/Libraries/Lists/__tests__/VirtualizedList-stickyHeaders-benchmark-itest.js

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @fantom_mode dev
+ * @flow strict-local
+ * @format
+ */
+
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import * as Fantom from '@react-native/fantom';
+import VirtualizedList from '@react-native/virtualized-lists/Lists/VirtualizedList';
+
+const VIEWPORT_SIZE = 100;
+const ROW_COUNTS = [100000, 250000, 500000, 750000, 1000000];
+
+type StickyHeaderCase = {
+  itemCount: number,
+  name: string,
+  stickyHeaderIndices?: ReadonlyArray<number>,
+};
+
+type BenchmarkData = {
+  length: number,
+};
+
+const benchmarkCases: Array<StickyHeaderCase> = [];
+
+for (let i = 0; i < ROW_COUNTS.length; i++) {
+  const itemCount = ROW_COUNTS[i];
+  const label = itemCount === 1000000 ? '1m' : `${itemCount / 1000}k`;
+
+  benchmarkCases.push(
+    {
+      itemCount,
+      name: `${label} rows without sticky headers`,
+    },
+    {
+      itemCount,
+      name: `${label} rows with empty sticky headers`,
+      stickyHeaderIndices: [],
+    },
+    {
+      itemCount,
+      name: `${label} rows with one sticky header at the top`,
+      stickyHeaderIndices: [0],
+    },
+  );
+}
+
+function createProps(
+  itemCount: number,
+  stickyHeaderIndices?: ReadonlyArray<number>,
+) {
+  return {
+    data: {length: itemCount},
+    getItem: (_data: BenchmarkData, index: number) => index,
+    getItemCount: (data: BenchmarkData) => data.length,
+    initialScrollIndex: 1,
+    stickyHeaderIndices,
+  };
+}
+
+Fantom.unstable_benchmark
+  .suite('VirtualizedList sticky headers', {
+    disableOptimizedBuildCheck: true,
+    minIterations: 100,
+  })
+  .test.each(
+    benchmarkCases,
+    benchmarkCase => `create render mask for ${benchmarkCase.name}`,
+    benchmarkCase => {
+      // $FlowExpectedError[prop-missing] Benchmark exercises an internal helper.
+      VirtualizedList._createRenderMask(
+        createProps(benchmarkCase.itemCount, benchmarkCase.stickyHeaderIndices),
+        {
+          first: benchmarkCase.itemCount - VIEWPORT_SIZE,
+          last: benchmarkCase.itemCount - 1,
+        },
+      );
+    },
+  );

packages/virtualized-lists/Lists/VirtualizedList.js

@@ -535,16 +535,18 @@ class VirtualizedList extends StateSafePureComponent<
         renderMask.addCells(initialRegion);
       }
 
-      // The layout coordinates of sticker headers may be off-screen while the
+      // The layout coordinates of sticky headers may be off-screen while the
       // actual header is on-screen. Keep the most recent before the viewport
       // rendered, even if its layout coordinates are not in viewport.
-      const stickyIndicesSet = new Set(props.stickyHeaderIndices);
-      VirtualizedList._ensureClosestStickyHeader(
-        props,
-        stickyIndicesSet,
-        renderMask,
-        cellsAroundViewport.first,
-      );
+      const stickyHeaderIndices = props.stickyHeaderIndices;
+      if (stickyHeaderIndices != null && stickyHeaderIndices.length > 0) {
+        VirtualizedList._ensureClosestStickyHeader(
+          props,
+          stickyHeaderIndices,
+          renderMask,
+          cellsAroundViewport.first,
+        );
+      }
     }
 
     return renderMask;
@@ -575,18 +577,30 @@ class VirtualizedList extends StateSafePureComponent<
 
   static _ensureClosestStickyHeader(
     props: VirtualizedListProps,
-    stickyIndicesSet: Set<number>,
+    stickyHeaderIndices: ReadonlyArray<number>,
     renderMask: CellRenderMask,
     cellIdx: number,
   ) {
     const stickyOffset = props.ListHeaderComponent ? 1 : 0;
+    const targetStickyIndex = cellIdx + stickyOffset;
+    let closestStickyIndex = null;
 
-    for (let itemIdx = cellIdx - 1; itemIdx >= 0; itemIdx--) {
-      if (stickyIndicesSet.has(itemIdx + stickyOffset)) {
-        renderMask.addCells({first: itemIdx, last: itemIdx});
-        break;
+    for (let itemIdx = 0; itemIdx < stickyHeaderIndices.length; itemIdx++) {
+      const stickyIndex = stickyHeaderIndices[itemIdx];
+      if (
+        Number.isInteger(stickyIndex) &&
+        stickyIndex < targetStickyIndex &&
+        stickyIndex >= stickyOffset &&
+        (closestStickyIndex == null || stickyIndex > closestStickyIndex)
+      ) {
+        closestStickyIndex = stickyIndex;
       }
     }
+
+    if (closestStickyIndex != null) {
+      const itemIdx = closestStickyIndex - stickyOffset;
+      renderMask.addCells({first: itemIdx, last: itemIdx});
+    }
   }
 
   _adjustCellsAroundViewport(

packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js

@@ -988,6 +988,52 @@ describe('VirtualizedList', () => {
     // scrolled-past in layout space.
     expect(component).toMatchSnapshot();
   });
+
+  it('does not add a sticky header to the render mask when no sticky headers are configured', () => {
+    const expectedRegions = [
+      {first: 0, last: 9, isSpacer: true},
+      {first: 10, last: 12, isSpacer: false},
+      {first: 13, last: 19, isSpacer: true},
+    ];
+
+    expect(createRenderMaskForStickyHeaderTest().enumerateRegions()).toEqual(
+      expectedRegions,
+    );
+    expect(
+      createRenderMaskForStickyHeaderTest({
+        stickyHeaderIndices: [],
+      }).enumerateRegions(),
+    ).toEqual(expectedRegions);
+  });
+
+  it('adds the closest sticky header above the viewport from unsorted stickyHeaderIndices', () => {
+    expect(
+      createRenderMaskForStickyHeaderTest({
+        stickyHeaderIndices: [12, 0, 8.5, 7, 7, -1],
+      }).enumerateRegions(),
+    ).toEqual([
+      {first: 0, last: 6, isSpacer: true},
+      {first: 7, last: 7, isSpacer: false},
+      {first: 8, last: 9, isSpacer: true},
+      {first: 10, last: 12, isSpacer: false},
+      {first: 13, last: 19, isSpacer: true},
+    ]);
+  });
+
+  it('accounts for ListHeaderComponent offset when adding the closest sticky header', () => {
+    expect(
+      createRenderMaskForStickyHeaderTest({
+        ListHeaderComponent: () => createElement('Header'),
+        stickyHeaderIndices: [3],
+      }).enumerateRegions(),
+    ).toEqual([
+      {first: 0, last: 1, isSpacer: true},
+      {first: 2, last: 2, isSpacer: false},
+      {first: 3, last: 9, isSpacer: true},
+      {first: 10, last: 12, isSpacer: false},
+      {first: 13, last: 19, isSpacer: true},
+    ]);
+  });
 });
 
 it('unmounts sticky headers moved below viewport', async () => {
@@ -2569,6 +2615,26 @@ function fixedHeightItemLayoutProps(height) {
   };
 }
 
+function createRenderMaskForStickyHeaderTest({
+  ListHeaderComponent,
+  stickyHeaderIndices: stickyHeaderIndicesForTest,
+} = {}) {
+  return VirtualizedList._createRenderMask(
+    {
+      data: {length: 20},
+      getItem: (data, index) => index,
+      getItemCount: data => data.length,
+      initialScrollIndex: 1,
+      ListHeaderComponent,
+      stickyHeaderIndices: stickyHeaderIndicesForTest,
+    },
+    {
+      first: 10,
+      last: 12,
+    },
+  );
+}
+
 let lastViewportLayout;
 let lastContentLayout;