Description

A virtual list is a technique that reduces the size of the DOM by only adding items when they are in view, and removing them when they exit. This is good for:

• Browser painting - less items to paint.
• Virtual DOM reconciliation - less items makes rendering faster for things like react.
  ?

Reach for when

You have hundreds of items in a scroll-able element.

Visualization

Pseudocode

div - fixed height + overflow:auto //(creates scrollbar)
	div - height = totalItems*itemHeight //(make scrollbar the right size)
		onScroll - startIndex = Math.floor(scrollTop/itemHeight)
		items[startIndex:startIndex+visibleCount+buffer] //(display)
			transform: translateY(startIndex*itemHeight) //(position)

Code

https://reactnative.dev/docs/virtualizedlist

<VirtualizedList
	initialNumToRender={4}
	renderItem={({item}) => <Item title={item.title} />}
	keyExtractor={item => item.id}
	getItemCount={getItemCount}
	getItem={getItem}
/>