Collections
A good number of components such as List, Tree, Menu, Tabs, etc. display a collection of items. @react-stately/collections is used for all of them to provide a uniform and flexible API that would allow for both static jsx-based or dynamic source of items.
Rendering optimization caveat
When the API for dynamic items (items prop and a render function as children) is used, the render result for each
item is subject to caching based
on the item object. It's important to understand this assumption that the rendering should only depend on the item, and
not any other piece of state, for example, from the closure.
The item renderer function should be a pure function that relies exclusively on its single argument: the item object.
However, in certain scenarios, you might need to render UI elements based on factors other than the item object. Here are a few ways to achieve this:
Using context
TODO (This is particularly useful for components implementing virtual rendering, where only a limited number of items are mounted at a time, and changes to additional state should affect only those without rebuilding the entire collection).
Wrapping items with extra state
TODO
Disabling or limiting cache
For components that support it, you can control caching by setting the cacheInvalidation prop. Passing true to this prop will disable caching entirely, but it may significantly reduce performance for large collections. In a performance test on a Tree with 400 elements, disabling the cache resulted in a ~10x slower rendering.
A middle-ground approach is to pass an array of cache invalidators instead of completely turning off the cache:
<Tree cacheInvalidation={{ invalidators: [nestedSelection] }}>...</Tree>
This configuration will only invalidate the cache when nestedSelection changes.