OnItemsRendered and onScroll callback changes This tradeoff is being made to enable lists to be smaller and easier to maintain. Grid components will continue to support direction="RTL", but lists will not (since they will only support a vertical layout). In order to simplify implementation and maintenance, and because the overwhelmingly common use case is vertical lists, I will be removing support for layout="horizontal". Previously, list components supported both horizontal and vertical layout modes. This means that complicated examples like this can be re-written more easily:Ĭonst Example = ( / > ) Because inline functions couldn't be used to close over local scope, it was more complicated for item renderers to share state with parents, requiring APIs like itemData and a custom areEqual comparison export.Īfter taking the above pros and cons into consideration, I've decided to convert to a render props approach for react-window as well.This means that docs need to teach people not to use them even though they're often more convenient. Because their "type" (the function definition) gets recreated each time the parent component renders, React deeply unmounts and remounts their rendered tree. Inline item renderers incur a high cost.Unfortunately there were also some downsides: Keys can be managed by react-window without requiring the render prop to pass them along (and without requiring cloneElement calls).APIs like hooks and suspense "just work" inside of item renderers.mo, useMemo, shouldComponentUpdate) so I didn't need to implement my own caching abstraction for item renderers. React provides built-in solutions for memoization (e.g.There were a couple of motivations for doing this: React.createElement(children, props))) rather than as render props (e.g. One of the major changes from react-virtualized to react-window was the decision to treat children as React elements (e.g. It supports variable size rows and columns, but does not support automatically measuring and updating their sizes. spreadsheets) that should be virtualized along both vertical and horizontal axis. This component should be used for tabular data (e.g.It requires the ResizeObserver API (or polyfill).
0 Comments
Leave a Reply. |