Doc: Performance optimization for Nested List

[xhd2015]

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".

[xhd2015]

Reference: React Memo: https://react.dev/reference/react/memo React Dev Tool: https://react.dev/learn/react-developer-tools React Profiler: https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html

You Might Not Need useEffect: https://react.dev/learn/you-might-not-need-an-effect