Fix React StrictMode useCollection (#4013)

* Fix React StrictMode useCollection

Author: snowystinger

packages/@react-spectrum/tabs/src/Tabs.tsx

@@ -337,7 +337,7 @@ export function TabPanels<T>(props: SpectrumTabPanelsProps<T>) {
   const {tabState, tabProps} = useContext(TabContext);
   const {tabListState} = tabState;
 
-  const factory = nodes => new ListCollection(nodes);
+  const factory = useCallback(nodes => new ListCollection(nodes), []);
   const collection = useCollection({items: tabProps.items, ...props}, factory, {suppressTextValueWarning: true});
   const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;
 

packages/@react-stately/collections/src/useCollection.ts

@@ -10,25 +10,21 @@
  * governing permissions and limitations under the License.
  */
 
-import {Collection, CollectionBase, CollectionStateBase, Node} from '@react-types/shared';
+import {Collection, CollectionStateBase, Node} from '@react-types/shared';
 import {CollectionBuilder} from './CollectionBuilder';
-import {useMemo, useRef} from 'react';
+import {useMemo} from 'react';
 
-type CollectionFactory<T, C extends Collection<Node<T>>> = (node: Iterable<Node<T>>, prev: C | null) => C;
+type CollectionFactory<T, C extends Collection<Node<T>>> = (node: Iterable<Node<T>>) => C;
 
-export function useCollection<T extends object, C extends Collection<Node<T>> = Collection<Node<T>>>(props: CollectionStateBase<T, C>, factory: CollectionFactory<T, C>, context?: unknown, invalidators: Array<any> = []): C {
+export function useCollection<T extends object, C extends Collection<Node<T>> = Collection<Node<T>>>(props: CollectionStateBase<T, C>, factory: CollectionFactory<T, C>, context?: unknown): C {
   let builder = useMemo(() => new CollectionBuilder<T>(), []);
-
-  let prev = useRef<C>(null);
-  return useMemo(() => {
-    if (props.collection) {
-      return props.collection;
+  let {children, items, collection} = props;
+  let result = useMemo(() => {
+    if (collection) {
+      return collection;
     }
-
-    let nodes = builder.build(props as CollectionBase<T>, context);
-    prev.current = factory(nodes, prev.current);
-    return prev.current;
-  // Don't invalidate when any prop changes, just the two we care about.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [builder, props.children, props.items, props.collection, context, ...invalidators]);
+    let nodes = builder.build({children, items}, context);
+    return factory(nodes);
+  }, [builder, children, items, collection, context, factory]);
+  return result;
 }

packages/@react-stately/list/src/useListState.ts

@@ -11,7 +11,7 @@
  */
 
 import {Collection, CollectionStateBase, Node} from '@react-types/shared';
-import {Key, useEffect, useMemo, useRef} from 'react';
+import {Key, useCallback, useEffect, useMemo, useRef} from 'react';
 import {ListCollection} from './ListCollection';
 import {MultipleSelectionStateProps, SelectionManager, useMultipleSelectionState} from '@react-stately/selection';
 import {useCollection} from '@react-stately/collections';
@@ -46,10 +46,10 @@ export function useListState<T extends object>(props: ListProps<T>): ListState<T
     props.disabledKeys ? new Set(props.disabledKeys) : new Set<Key>()
   , [props.disabledKeys]);
 
-  let factory = nodes => filter ? new ListCollection(filter(nodes)) : new ListCollection(nodes as Iterable<Node<T>>);
+  let factory = useCallback(nodes => filter ? new ListCollection(filter(nodes)) : new ListCollection(nodes as Iterable<Node<T>>), [filter]);
   let context = useMemo(() => ({suppressTextValueWarning: props.suppressTextValueWarning}), [props.suppressTextValueWarning]);
 
-  let collection = useCollection(props, factory, context, [filter]);
+  let collection = useCollection(props, factory, context);
 
   let selectionManager = useMemo(() =>
     new SelectionManager(collection, selectionState)

packages/@react-stately/table/src/useTableState.ts

@@ -13,7 +13,7 @@
 import {CollectionStateBase, Node, SelectionMode, Sortable, SortDescriptor, SortDirection} from '@react-types/shared';
 import {GridState, useGridState} from '@react-stately/grid';
 import {TableCollection as ITableCollection} from '@react-types/table';
-import {Key, useMemo, useState} from 'react';
+import {Key, useCallback, useMemo, useState} from 'react';
 import {MultipleSelectionStateProps} from '@react-stately/selection';
 import {TableCollection} from './TableCollection';
 import {useCollection} from '@react-stately/collections';
@@ -60,19 +60,19 @@ const OPPOSITE_SORT_DIRECTION = {
  */
 export function useTableState<T extends object>(props: TableStateProps<T>): TableState<T> {
   let [isKeyboardNavigationDisabled, setKeyboardNavigationDisabled] = useState(false);
-  let {selectionMode = 'none'} = props;
+  let {selectionMode = 'none', showSelectionCheckboxes, showDragButtons} = props;
 
   let context = useMemo(() => ({
-    showSelectionCheckboxes: props.showSelectionCheckboxes && selectionMode !== 'none',
-    showDragButtons: props.showDragButtons,
+    showSelectionCheckboxes: showSelectionCheckboxes && selectionMode !== 'none',
+    showDragButtons: showDragButtons,
     selectionMode,
     columns: []
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [props.children, props.showSelectionCheckboxes, selectionMode, props.showDragButtons]);
+  }), [props.children, showSelectionCheckboxes, selectionMode, showDragButtons]);
 
   let collection = useCollection<T, ITableCollection<T>>(
     props,
-    (nodes, prev) => new TableCollection(nodes, prev, context),
+    useCallback((nodes) => new TableCollection(nodes, null, context), [context]),
     context
   );
   let {disabledKeys, selectionManager} = useGridState({

packages/@react-stately/tree/src/useTreeState.ts

@@ -11,7 +11,7 @@
  */
 
 import {Collection, CollectionStateBase, Expandable, MultipleSelection, Node} from '@react-types/shared';
-import {Key, useEffect, useMemo} from 'react';
+import {Key, useCallback, useEffect, useMemo} from 'react';
 import {SelectionManager, useMultipleSelectionState} from '@react-stately/selection';
 import {TreeCollection} from './TreeCollection';
 import {useCollection} from '@react-stately/collections';
@@ -51,7 +51,7 @@ export function useTreeState<T extends object>(props: TreeProps<T>): TreeState<T
     props.disabledKeys ? new Set(props.disabledKeys) : new Set<Key>()
   , [props.disabledKeys]);
 
-  let tree = useCollection(props, nodes => new TreeCollection(nodes, {expandedKeys}), null, [expandedKeys]);
+  let tree = useCollection(props, useCallback(nodes => new TreeCollection(nodes, {expandedKeys}), [expandedKeys]), null);
 
   // Reset focused key if that item is deleted from the collection.
   useEffect(() => {