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

Virtualise Tree

Browse Source 
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
This commit is contained in:
Luke De Feo
2023-06-19 05:06:52 -07:00
committed by Facebook GitHub Bot
parent 5ce2c984a9
commit e9d098b9cd
3 changed files with 130 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
desktop/plugins/public/yarn.lock
View File

@@ -155,6 +155,18 @@
estree-walker "^1.0.1"
picomatch "^2.2.2"
"@tanstack/react-virtual@3.0.0-beta.54":
version "3.0.0-beta.54"
resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.54.tgz#755979455adf13f2584937204a3f38703e446037"
integrity sha512-D1mDMf4UPbrtHRZZriCly5bXTBMhylslm4dhcHqTtDJ6brQcgGmk8YD9JdWBGWfGSWPKoh2x1H3e7eh+hgPXtQ==
dependencies:
"@tanstack/virtual-core" "3.0.0-beta.54"
"@tanstack/virtual-core@3.0.0-beta.54":
version "3.0.0-beta.54"
resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.54.tgz#12259d007911ad9fce1388385c54a9141f4ecdc4"
integrity sha512-jtkwqdP2rY2iCCDVAFuaNBH3fiEi29aTn2RhtIoky8DTTiCdc48plpHHreLwmv1PICJ4AJUUESaq3xa8fZH8+g==
"@testing-library/dom@^7.28.1":
version "7.29.4"
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.29.4.tgz#1647c2b478789621ead7a50614ad81ab5ae5b86c"