fix: re-implement List early render

change/@fluentui-react-d174ae16-7e82-4494-b026-d256fe1eb378.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: re-implement early List rendering behind prop flag",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react/etc/react.api.md

@@ -6781,6 +6781,7 @@ export interface IListProps<T = any> extends React_2.HTMLAttributes<List<T> | HT
     onRenderSurface?: IRenderFunction<IListOnRenderSurfaceProps<T>>;
     onShouldVirtualize?: (props: IListProps<T>) => boolean;
     renderCount?: number;
+    renderEarly?: boolean;
     renderedWindowsAhead?: number;
     renderedWindowsBehind?: number;
     role?: string;

packages/react/src/components/List/List.test.tsx

@@ -135,6 +135,16 @@ describe('List', () => {
 
       expect(rows).toHaveLength(4);
     });
+
+    it('renders List correctly when `renderEarly={true}`', () => {
+      List.prototype.componentDidMount = jest.fn();
+
+      const onRenderCell = () => null;
+      const component = renderer.create(<List items={[]} onRenderCell={onRenderCell} renderEarly={true} />);
+      const tree = component.toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
   });
 
   describe('if provided', () => {

packages/react/src/components/List/List.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   Async,
   EventGroup,
+  canUseDOM,
   css,
   divProperties,
   findIndex,
@@ -338,7 +339,7 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
   public componentDidMount(): void {
     this._scrollElement = findScrollableParent(this._root.current) as HTMLElement;
     this._scrollTop = 0;
-    this.setState(this._updatePages(this.props, this.state));
+    this.setState({ ...this._updatePages(this.props, this.state), hasMounted: true });
     this._measureVersion++;
 
     this._events.on(window, 'resize', this._onAsyncResize);
@@ -491,7 +492,8 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
       nextProps.items !== this.props.items ||
       nextProps.renderCount !== this.props.renderCount ||
       nextProps.startIndex !== this.props.startIndex ||
-      nextProps.version !== this.props.version
+      nextProps.version !== this.props.version ||
+      (!previousState.hasMounted && this.props.renderEarly && canUseDOM())
     ) {
       // We have received new items so we want to make sure that initially we only render a single window to
       // fill the currently visible rect, and then later render additional windows.

packages/react/src/components/List/List.types.ts

@@ -279,6 +279,13 @@ export interface IListProps<T = any> extends React.HTMLAttributes<List<T> | HTML
    * This is a performance optimization to let List skip a render cycle by not updating its scrolling state.
    */
   ignoreScrollingState?: boolean;
+
+  /**
+   * Whether to render the list earlier than the default.
+   * Use this in scenarios where the list is contained in a FocusZone or FocusTrapZone
+   * as in a Dialog.
+   */
+  renderEarly?: boolean;
 }
 
 /**

packages/react/src/components/List/__snapshots__/List.test.tsx.snap

@@ -1,5 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`List by default renders List correctly when \`renderEarly={true}\` 1`] = `
+<div
+  className="ms-List"
+>
+  <div
+    className="ms-List-surface"
+    role="presentation"
+  />
+</div>
+`;
+
 exports[`List renders List correctly 1`] = `
 <div
   className="ms-List"