Background: xgo renders 472 tree items in a nested list, a single click takes 127ms to take effect:
The profiler shows that the possible bottleneck is unnecessary re-rendering unrelated sub trees.
For example, in the above demonstration, only the ListItems with key="binding" should be updated while it seems all other sub trees were also evaluated, though nothing new happen.
So, use React.memo to optimize the ListItems:
const ListItemMemo = memo(ListItem, (prev, next) => {
if (prev.item !== next.item) {
return false
}
if (!isSamePath(prev.parentPath, next.parentPath)) {
return false
}
return true
})After this, a single click takes only 6ms to take effect:
NOTE: in the bottom area with grey background, profiler shows that ListItems with other keys "Did not render".
Background: xgo renders 472 tree items in a nested list, a single click takes 127ms to take effect:
The profiler shows that the possible bottleneck is unnecessary re-rendering unrelated sub trees.
For example, in the above demonstration, only the
ListItemswithkey="binding"should be updated while it seems all other sub trees were also evaluated, though nothing new happen.So, use
React.memoto optimize theListItems:After this, a single click takes only 6ms to take effect:
NOTE: in the bottom area with grey background, profiler shows that ListItems with other keys "Did not render".