VirtualizedList

Usage

The VirtualizedList component is a high-performance list component that efficiently renders only the items currently visible on the screen, regardless of the size of the data set.

This is the base implementation of the FlatList and SectionList components. In general, this should only be used if you need more flexibility than FlatList or SectionList can provides, e.g. for use with immutable data instead of plain arrays.

Virtualization massively improves the performance and memory consumption of large lists by maintaining a finite render window showing only active items and replacing all items outside of the render window with appropriately sized blank space. The render window adapts with scrolling behavior, items are rendered incrementally with low-pri (after any running interactions) if they are far from the visible area, or with hi-pri if they are near the visible area.

Best Practices

Pagination: Implement infinite scrolling by utilizing the onEndReached prop for large datasets.
Use Memoization: Use React.memo() to avoid unnecessary re-renders of list items.
Lazy Load Images: If the list contains images, ensure they are lazy-loaded to avoid consuming memory unnecessarily.
Key Management: Ensure keyExtractor returns a unique and stable key to avoid performance degradation caused by reordering or re-rendering items unnecessarily.

Considerations

Internal State: Internal state is not preserved when content scrolls out of the render window. Ensure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
Prop Updates: This is a PureComponent meaning it will not re-render if props remain shallow-equal. Make sure that everything your renderItem function depends on is in passed as a prop (e.g. extraData) that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.
Item Rendering: To constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application.
Key Management: By default, the list looks for a key prop on each item and uses that for the React key. Alternatively, you can provide a custom keyExtractor prop.

Accessibility Considerations

Focus Retention: Retain focus and scroll position when adding or removing items from the list.
Content Labeling: Ensure each list item has accessible labels or descriptions for screen readers.

Performance Considerations

Windowing: Adjust the initialNumToRender and windowSize props to strike a balance between performance and UX.
Cell Recycling: Use CellRendererComponent to efficiently recycle rendered items, especially for very large datasets.
Avoid Expensive Re-renders: Avoid triggering unnecessary re-renders by memoizing components or using React.PureComponent.