Skip to content

Commit

Permalink
Ship VirtualizedList_EXPERIMENTAL
Browse files Browse the repository at this point in the history
Summary:
`VirtualizedList_EXPERIMENTAL` is a fork of VirtualizedList. It was originally created for the purpose of keyboard/a11y fixes, which required the list to allow rendering discontiguous regions of cells. So, the large part of the refactor is in the data structure used to represent state (now a sparse bitmask), and building out the render function to operate off the bitmask.

This structure allows pre-rendering areas where we know focus must be able to be synchronously be moved to. This is exercised on platforms like Windows and macOS which fire view level focus events. The new implementation otherwise aims to preserve near-exact list behavior as previously.

Apart from the structure change, the refactor has made the code (subjectively) a lot easier to reason about, and there are now stronger internal invariants than before. The bitmask structure also enables new approaches for nested list stability, and implementing OffScreen.

**Why ship it now?**

Having two implementations has multiple times prevented other changes to VirtualizedList, so it is incurring a constant engineer cost.

At this point, we have a lot of reason to be confident in the maturity of the new list implementation (see the test plan below). So, reconciling the implementations not only unlocks the enhancements of the new list, but unblocks future changes to VirtualizedList.

## Test Plan

1. **Unit tests:** A few dozen unit tests were added to VirtualizedList, validating the regions it renders in response to injected input, across its API surface. Both VirtualizedList implementations must pass the same tests, around expected behavior.
2. **RNTester:** Scenarios in RNTester were manually validated, and all worked as before
3. **New invariants:** I added a lot of internal logic checks and bounds checks as invariant violations, to try to produce signal if any part of the refactor went unexpected in the wild.
4. **MSFT Rollout:** I rolled out the changes as a fork of VirtualizedList at MSFT to a couple of high-usage surfaces using Android, iOS, and Windows on Paper. Some invariant violations were surfaced and fixed, but telemetry showed solid system and scenario health with the change.
5. **Meta import:** Fixed all land-blocking test failures when using the new list. These were confined to updating snapshots, and adding additional checks for invalid input.
6. **Panel apps:** Manually validated top-level surfaces of panel apps in debug/release modes. Fixed a couple of invariant violations and novel usages. Profiled new JS structures against an expensive list with Hermes profiler.
7. **Facebook App Rollout:** After some manual validation of top-level surfaces, the change was rolled out to Facebook for Android and iOS as an experiment. New invariant violations were fixed, and the change has sat in production for several weeks at this point, while measuring impact to metrics like error rate, responsiveness, and impressions.

This is the first introduction to all of OSS, and some Meta internal apps. This means there may still be novel usages of VirtualizedList that were not picked up during testing, but I think there has been enough diligence to roll out what has been tested, and forward fix anything unexpected that might still come up.

Changelog:
[General][Changed] - Ship VirtualizedList_EXPERIMENTAL

Reviewed By: javache

Differential Revision: D40259791

fbshipit-source-id: 63eee9381d197a1e38ae663b2158436ff135c0e1
  • Loading branch information
NickGerleman authored and facebook-github-bot committed Oct 13, 2022
1 parent dcd2114 commit 9715993
Show file tree
Hide file tree
Showing 15 changed files with 1,984 additions and 8,673 deletions.
2 changes: 1 addition & 1 deletion Libraries/Lists/FlatList.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@ import type {
import type {RenderItemProps, RenderItemType} from './VirtualizedList';

import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
import VirtualizedList from './VirtualizedList';
import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
import memoizeOne from 'memoize-one';

const View = require('../Components/View/View');
const StyleSheet = require('../StyleSheet/StyleSheet');
const deepDiffer = require('../Utilities/differ/deepDiffer');
const Platform = require('../Utilities/Platform');
const VirtualizedList = require('./VirtualizedList');
const invariant = require('invariant');
const React = require('react');

Expand Down
4 changes: 2 additions & 2 deletions Libraries/Lists/FlatList.js.flow
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@

const React = require('react');
const View = require('../Components/View/View');
const VirtualizedList = require('./VirtualizedList');

import typeof ScrollViewNativeComponent from '../Components/ScrollView/ScrollViewNativeComponent';
import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
Expand All @@ -20,6 +19,7 @@ import type {
ViewabilityConfigCallbackPair,
} from './ViewabilityHelper';
import type {RenderItemType, RenderItemProps} from './VirtualizedList';
import typeof VirtualizedList from './VirtualizedList';

type RequiredProps<ItemT> = {|
/**
Expand Down Expand Up @@ -61,7 +61,7 @@ type FlatListProps<ItemT> = {|
...OptionalProps<ItemT>,
|};

type VirtualizedListProps = React.ElementConfig<typeof VirtualizedList>;
type VirtualizedListProps = React.ElementConfig<VirtualizedList>;

export type Props<ItemT> = {
...$Diff<
Expand Down
Loading

0 comments on commit 9715993

Please sign in to comment.