Comments (8)
An array is easier to handle for the basic use case. IMO <TreeView expanded={[1, 2]} />
is easier to parse than <TreeView expanded={{1: true, 2: true}} />
. We could switch to other data structures internally but this adds the cost of transforming these data types.
In the end it boils down to: Are there real-world use cases where dictionaries make a noticeable difference?
from mui-x.
We also require virtualization for Tree View. Most of the time, Tree VIew has many items inside.
from mui-x.
@oliviertassinari done! #9685
from mui-x.
This line shows that there is indeed an array look up for finding if the item is expanded
https://github.com/mui-org/material-ui/blob/e04b4634f4b72f564c4e7532c1c91c15ab4fd5eb/packages/material-ui-lab/src/TreeView/TreeView.js#L39
But firstly Arrays in JavaScript are known to have faster lookup time when they have small length and secondly both in terms of performance and proper type usage you should go with Set
from mui-x.
We could switch to other data structures internally but this adds the cost of transforming these data types.
I was interested in testing this approach out, it seems that it's a great approach.
Here is a quick and dirty benchmark, assuming somebody tries to render 100,000 items:
var expanded1 = Array.from(new Array(100000)).map((_, index) => String(index))
console.time('conversion')
var expanded2 = expanded1.reduce((acc, index) => {
acc[index] = true;
return acc;
}, {});
console.timeEnd('conversion')
console.time('array')
expanded1.indexOf('foo')
console.timeEnd('array')
console.time('object')
expanded['foo']
console.timeEnd('object')
conversion: 4.6630859375ms
array: 0.3330078125ms
object: 0.001953125ms
It looks like that if we hit a performance issue, we can handle the concern internally, 20 items are enough to convert the data structure to an object and observe an ROI > 1. So I don't think that performance should be a concern from the API standpoint.
This makes me think, virtualization support could be pretty neat!
from mui-x.
- Objects are likely the worst choice here. Set and Map should have better runtime. Adding this many properties to objects has likely some memory overhead.
- .reduce is over-engineered. A simple forEach does the same.
- Micro-benchmarks are not useful for this issue. We want to know the actual performance impact on render/user interactions.
- console.time is inaccurate for micro benchmarks. Try performance.now or, better, jsperf.com
from mui-x.
I had similar thoughts on this, I had previously discussed using a Set but decided against it since I did not have an example where I could measure the actual performance impact as @eps1lon suggested.
from mui-x.
@rash2x Could you open a new issue for Virtualization? Thanks
from mui-x.
Related Issues (20)
- [data grid] `onSortModelChange` now gets passed sorts with a direction of `null`. HOT 3
- [data grid] rowHeight={undefined} does not show "no rows" or loading HOT 6
- [TreeView] Add customization examples for the `RichTreeView` HOT 1
- [TreeView] component is not accessible in Android Talkback HOT 5
- [all components] Add support for zero runtime CSS (`pigmentcss`)
- [pickers] Add support for zero runtime CSS (`pigmentcss`)
- [tree view] Add support for zero runtime CSS (pigmentcss)
- [data grid] Add support for zero runtime CSS (pigmentcss)
- [charts] Add support for zero runtime CSS (pigmentcss)
- [data grid] Why does the cell lose focus on scroll with an Excel style top left corner click HOT 4
- longFormatters is not exported from package date-ins HOT 4
- [TreeView] TreeItem label is two levels of specificity instead of one HOT 5
- [TreeView] HTML is not valid HOT 13
- [TreeView] Add the example from the X landing page to the customization doc HOT 4
- [TreeView] Use new DX patterns (hooks and slots) for `TreeItem` customization HOT 1
- Not able to localize date picker for the date filter HOT 6
- Pagination and rows per page not working HOT 2
- [data grid] Flex columns causes column grouping headers to become un-aligned from their columns for some column resizes HOT 1
- [data grid] How do I Export The Save State Item To LocalStorage HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.