Summary:
Removed previous memoization approach as it was causing issues and very inconsistent perf increase due to the indent guides often causing half the tree needed to rerender.
New approach is using react virtual. Its very fast in all cases including initial render off the wire. It does require 2 hacks.
1) React virtual requires you to explicitly size your parent component. In all the examples they have a height in px. This doesnt really work given we can resize the window. To mitigate this I added a grandparent component that is sized correclty with flexbox, then i use a layout effect to grab the height from the grandparent ref and set it to the scroll parent ref
2) Due to the implementaion of react virtual the width of the items in the tree is not correct. By default all the content overflows the box and the box doesnt grow automatically to fill the content. I think this is due to absolute positioning which breaks all the normal layout engine rules. The fix is to get the scrollWidth of the parent scroll view. (scrollWidth is the width of the element including overflow) and then set it via the refs we have on the tree item elements. This is also done in a layout effect.
changelog: UIDebugger virtualized UI to improve rendering performance
Reviewed By: aigoncharov
Differential Revision: D46724776
fbshipit-source-id: 75a6d35542066bd788aa4536481dedc72f667fc1
e9d098b9cd