jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Memoize tree nodes

Browse Source 
Reviewed By: antonk52

Differential Revision: D41838164

fbshipit-source-id: 3184f4ee607f0dd47604265fc259480403c083f0
This commit is contained in:
Luke De Feo
2022-12-12 07:28:37 -08:00
committed by Facebook GitHub Bot
parent 0db0afec21
commit fc43580134
1 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
desktop/plugins/public/ui-debugger/components/Tree2.tsx
View File

@@ -88,7 +88,7 @@ export function Tree2({
instance.uiState.hoveredNodes.set([]); instance.uiState.hoveredNodes.set([]);
}}> }}>
{treeNodes.map((treeNode, index) => ( {treeNodes.map((treeNode, index) => (
<TreeItemContainer <MemoTreeItemContainer
innerRef={refs[index]} innerRef={refs[index]}
isUsingKBToScroll={isUsingKBToScroll} isUsingKBToScroll={isUsingKBToScroll}
key={treeNode.id} key={treeNode.id}
@@ -107,6 +107,18 @@ export type TreeNode = UINode & {
isExpanded: boolean; isExpanded: boolean;
}; };
const MemoTreeItemContainer = React.memo(
TreeItemContainer,
(prevProps, nextProps) => {
const id = prevProps.treeNode.id;
return (
prevProps.treeNode === nextProps.treeNode &&
id !== prevProps.selectedNode &&
id !== nextProps.selectedNode
);
},
);
function TreeItemContainer({ function TreeItemContainer({
innerRef, innerRef,
isUsingKBToScroll, isUsingKBToScroll,