List: Re-initialize on mount in React 18.

change/@fluentui-react-4f283ac3-2e97-4583-8021-dad49788d10d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: List async and events to allow remounting component.",
+  "packageName": "@fluentui/react",
+  "email": "m.verbakel@eshgro.nl",
+  "dependentChangeType": "patch"
+}

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

@@ -28,8 +28,6 @@ function mockData(count: number = 0): IMockItem[] {
 
 describe('List', () => {
   it('renders List correctly', () => {
-    List.prototype.componentDidMount = jest.fn();
-
     const onRenderCell = () => null;
     const component = renderer.create(<List items={[]} onRenderCell={onRenderCell} />);
     const tree = component.toJSON();
@@ -137,8 +135,6 @@ describe('List', () => {
     });
 
     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();

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

@@ -110,6 +110,10 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
   private _pageRefs: Record<string, unknown> = {};
   private _async: Async;
   private _events: EventGroup;
+  private _onAsyncScrollDebounced: () => void;
+  private _onAsyncIdleDebounced: () => void;
+  private _onScrollingDoneDebounced: () => void;
+  private _onAsyncResizeDebounced: () => void;
   private _estimatedPageHeight: number;
   private _totalEstimates: number;
   private _cachedPageHeights: {
@@ -164,8 +168,6 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
       hasMounted: false,
     };
 
-    this._async = new Async(this);
-    this._events = new EventGroup(this);
     this._estimatedPageHeight = 0;
     this._totalEstimates = 0;
     this._requiredWindowsAhead = 0;
@@ -174,24 +176,6 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
     // Track the measure version for everything.
     this._measureVersion = 0;
 
-    // Ensure that scrolls are lazy updated.
-    this._onAsyncScroll = this._async.debounce(this._onAsyncScroll, MIN_SCROLL_UPDATE_DELAY, {
-      leading: false,
-      maxWait: MAX_SCROLL_UPDATE_DELAY,
-    });
-
-    this._onAsyncIdle = this._async.debounce(this._onAsyncIdle, IDLE_DEBOUNCE_DELAY, {
-      leading: false,
-    });
-
-    this._onAsyncResize = this._async.debounce(this._onAsyncResize, RESIZE_DELAY, {
-      leading: false,
-    });
-
-    this._onScrollingDone = this._async.debounce(this._onScrollingDone, DONE_SCROLLING_WAIT, {
-      leading: false,
-    });
-
     this._cachedPageHeights = {};
     this._estimatedPageHeight = 0;
     this._focusedIndex = -1;
@@ -337,18 +321,39 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
   }
 
   public componentDidMount(): void {
+    this._async = new Async(this);
+    this._events = new EventGroup(this);
+
+    // Ensure that scrolls are lazy updated.
+    this._onAsyncScrollDebounced = this._async.debounce(this._onAsyncScroll, MIN_SCROLL_UPDATE_DELAY, {
+      leading: false,
+      maxWait: MAX_SCROLL_UPDATE_DELAY,
+    });
+
+    this._onAsyncIdleDebounced = this._async.debounce(this._onAsyncIdle, IDLE_DEBOUNCE_DELAY, {
+      leading: false,
+    });
+
+    this._onAsyncResizeDebounced = this._async.debounce(this._onAsyncResize, RESIZE_DELAY, {
+      leading: false,
+    });
+
+    this._onScrollingDoneDebounced = this._async.debounce(this._onScrollingDone, DONE_SCROLLING_WAIT, {
+      leading: false,
+    });
+
     this._scrollElement = findScrollableParent(this._root.current) as HTMLElement;
     this._scrollTop = 0;
     this.setState({ ...this._updatePages(this.props, this.state), hasMounted: true });
     this._measureVersion++;
 
-    this._events.on(window, 'resize', this._onAsyncResize);
+    this._events.on(window, 'resize', this._onAsyncResizeDebounced);
     if (this._root.current) {
       this._events.on(this._root.current, 'focus', this._onFocus, true);
     }
     if (this._scrollElement) {
       this._events.on(this._scrollElement, 'scroll', this._onScroll);
-      this._events.on(this._scrollElement, 'scroll', this._onAsyncScroll);
+      this._events.on(this._scrollElement, 'scroll', this._onAsyncScrollDebounced);
     }
   }
 
@@ -371,15 +376,15 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
             this._hasCompletedFirstRender = true;
             this.setState(this._updatePages(finalProps, finalState));
           } else {
-            this._onAsyncScroll();
+            this._onAsyncScrollDebounced();
           }
         } else {
           // Enqueue an idle bump.
-          this._onAsyncIdle();
+          this._onAsyncIdleDebounced();
         }
       } else {
         // Enqueue an idle bump
-        this._onAsyncIdle();
+        this._onAsyncIdleDebounced();
       }
 
       // Notify the caller that rendering the new pages has completed
@@ -390,8 +395,8 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
   }
 
   public componentWillUnmount(): void {
-    this._async.dispose();
-    this._events.dispose();
+    this._async?.dispose();
+    this._events?.dispose();
 
     delete this._scrollElement;
   }
@@ -667,7 +672,7 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
       this.setState({ isScrolling: true });
     }
     this._resetRequiredWindows();
-    this._onScrollingDone();
+    this._onScrollingDoneDebounced();
   }
 
   private _resetRequiredWindows(): void {
@@ -710,7 +715,7 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
 
     if (renderedWindowsAhead! > windowsAhead || renderedWindowsBehind! > windowsBehind) {
       // Async increment on next tick.
-      this._onAsyncIdle();
+      this._onAsyncIdleDebounced();
     }
   }