LazyColumn {
	items(books, key = { it.id }) {
		val rememberedValue = rememberSaveable {
			Random.nextInt()
		}

		Row(Modifier.animateItemPlacement(
				tween(durationMillis = 250)
		)) {
				
		}
	}
}

Tip 1. Don’t use 0-pixel sized items

val childConstrains = Constraints (
	maxWidth = 
		if (isVertical)
				constraints.maxWidth
		else
				constraints.Infinity,
	maxHeight = 
		if (isVertical)
				constraints.maxHeight
		else
				constraints.Infinity
)

아이템을 처음 측정할 때 LazyColumn은 처음에 무제한 높이 제약 조건으로 항목을 측정한다.

계산을 위해 측정된 높이를 사용하여 사용 가능한 뷰포트를 채울 때까지 계속 구성하기 위해 아이템에 다른 제약을 가하지 않는다. 그 후 List는 아이템을 위한 처리를 중단한다.

이렇게 꽉 채워두면 데이터를 받기전 화면에 보이는 item은 1개가 된다.

@Composable
fun Item() {
		Image(
			painter = rememberImagePainter(
									data = imgUrl
								),
			...
	)
}

(1) 리스트 아이템이 처음에 0픽셀 높이를 차지하는 경우, 첫 번째 측정에서 Lazy Column 높이가 0픽셀이므로 모든 아이템이 구성된다.

(2) 몇 미리 초 후에 이미지가 로드되면, 아이템이 Recomposition되고 이미지가 표시된다.

(3) Lazy List는 실제 뷰포트에 들어갈 수 있는 아이템이 일부라는 것을 알고, 불필요하게 Composition된 다른 아이템을 모두 버린다.

이렇게 많은 item들이 리포지션 되면서 낭비가 발생하기 때문에 데이터 로드 전 후의 아이템 크기가 동일하게 유지되도록 하는것이 좋다.

Tip 2. Avoid nesting components scrollable int the same direciton

스크린샷 2023-12-22 오후 2.31.28.png

//Throws IllegalStateException
Column(
	modifier = Modifier.verticalScroll(state)
) {
		LazyColumn(
			...
		)
}

//Try to like this
LazyColumn {
	item {
			Header()
	}
	items(data) { item -> 
			Item(item)
	}
	item {
		Footer()
	}
}