[TreeView] Do not re-render every Tree Item when the Rich Tree View re-renders (introduce selectors) #14210

flaviendelangle · 2024-08-14T15:25:21Z

Work

Internal changes

Introduce selectors

Replace the state with a store stored in a ref

// Access
-const itemsReordering = state.itemsReordering;
+const itemsReordering = store.value.itemsReordering; // without selectors (should not do it);
+const itemsReordering = selectorItemsReordering(store.value); // with selectors

// Updates
-setState((prevState) => ({ ...prevState, itemsReordering: null }));
+store.update((prevState) => ({ ...prevState, itemsReordering: null }));

Create selectors for every state access

The selectors are defined by each plugin in a useTreeViewXXX.selectors.ts file:

// Each plugin has a root selector that returns its entire state.
// This selector is not exported by the file
const selectorTreeViewItemsState: TreeViewRootSelector<UseTreeViewItemsSignature> = (state) =>
state.items;

// The plugin then defines selectors using `createSelectors` 
const selectorItemMetaLookup = createSelector(
  selectorTreeViewItemsState,
  (items) => items.itemMetaLookup,
);

// Those selectors can also accept additional arguments
const selectorItemOrderedChildrenIds = createSelector(
  [selectorTreeViewItemsState, (_, itemId: string | null) => itemId],
  (itemsState, itemId) =>
    itemsState.itemOrderedChildrenIdsLookup[itemId ?? TREE_VIEW_ROOT_PARENT_ID] ?? EMPTY_CHILDREN,
);

Replace every instance call in the render with selectors

// For selectors without additional parameters
const itemMetaLookup = useSelector(store, selectorItemMetaLookup);

// For selectors with additional parameters
-const isExpanded = instance.isItemExpanded(itemId);
+const isExpanded = useSelector(store, selectorIsItemExpanded, itemId);

BREAKING: Add idAttribute to TreeItemProviderProps (to stop getting it from itemMeta, see [TreeView] Do not re-render every Tree Item when the Rich Tree View re-renders (introduce selectors) #14210 (comment) for context)

Add memoization

BREAKING: Add React.memo around the WrappedTreeItem component in RichTreeViewItems
Make sure every Tree Item do not re-render every time the Tree View re-renders (even when it has children)
Add tests

Docs

Update the doc examples to not use publicAPI in the render

Extracted PRs

Changelog

Breaking changes

The Tree Item component can no longer use publicAPI methods in the render because they are now memoized — Learn more.

mui-bot · 2024-08-14T15:29:32Z

Deploy preview: https://deploy-preview-14210--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against fa353bd

github-actions · 2024-09-02T14:20:09Z