POC of react-window to virutalize selectfield options #87
Conversation
| ))} | ||
| <VariableSizeList | ||
| itemData={{ items: [...state.collection], state }} | ||
| itemSize={() => 42} |
There was a problem hiding this comment.
We can have this figure out the size for us dynamically based on option itself... Whether that is based on the MenuItem type (if we fix those heights), or doing a render of the item to figure out its height.
There was a problem hiding this comment.
When it figures it out for us, does it just look at the 1st item and assume that is the height of all items in the list?
...I assume that is what it's doing, but AFAICT a core assumption of the virtualized approach is known/consistent height across all items?
| itemData={{ items: [...state.collection], state }} | ||
| itemSize={() => 42} | ||
| height={Math.min(42 * state.collection.size, 400)} | ||
| itemCount={state.collection.size} |
There was a problem hiding this comment.
Just curious, it seems like with itemCount and itemSize, it could figure out height ... ah sure but you're adding in a min of 400...
| item, | ||
| state, | ||
| style, | ||
| }: { |
There was a problem hiding this comment.
Fwiw once the destructure-in-params starts to wrap like this, I think the props: ... and const { ... } = props approach is cleaner.
|
Looks great! |
| @@ -350,27 +360,46 @@ function ListBoxPopup<T extends object>(props: ListBoxPopupProps<T>) { | |||
| width: getFieldWidth(compact), | |||
| }; | |||
|
|
|||
| const Row = ({ data, index, style }: any) => { | |||
There was a problem hiding this comment.
I think this needs to be a top-level function, b/c as is the "Row function" will get re-created on each re-render of ListBoxPopup and so look like a brand new component to react. ...I think. Basing this assertion on this ticket that I wandered by:
"Inline item renderers incur a high cost. Because their "type" (the function definition) gets recreated each time the parent component renders, React deeply unmounts and remounts their rendered tree. This means that docs need to teach people not to use them even though they're often more convenient."
|
Closing in favor of using React-Virtuoso instead of React-Window |
No description provided.