# Diferenças entre List, VStack e LazyVStack

A primeiro momento você deve pensar que a principal diferença entre eles é que normalmente a **List** é pouco maleável enquanto o **VStack** e **LazyVStack** você tem mais possibilidade de customização.

**O tópico que eu quero trazer aqui é na verdade o tópico sobre alocação de memória.**

## **Alocação de memória**

### **VStack**

A **VStack** ela aloca todas os elementos na memória mesmo que não estejam visíveis e também não remove por nenhum motivo. Supondo que você monte uma lista com ***ForEach*** e **VStack** de 200 elementos, os 200 elementos estarão alocados na memória mesmo que o usuário não faça nada.

### LazyVStack

A **LazyVStack** ela aloca na memória somente os elementos que estão sendo visto mas não remove os elementos já alocados na memória. Supondo que você monte uma lista com ***ForEach*** e **VStack** de 200 elementos, os 10 primeiros elementos estarão alocados na memória e o restante não, entretanto se o usuário fizer scroll até o elemento 200 a memória vai estar com os 200 elementos alocados.

### List

A List ela usa o mesmo mecanismos de reutilização da TableView(saudades UIKit), ela aloca e remove os elementos, reutilizando os componentes. Supondo que você monte uma lista com ***ForEach*** e **List** de 200 elementos, os 10 primeiros elementos estarão alocados na memória e o restante não e se o usuário realizar o scroll vai remover da memória os elementos que ficaram não visíveis pro usuário e alocar os novos que ficaram visíveis.

Basicamente se a sua tela exibe 10 elementos a **List** vai deixar os 5 elementos antes e depois alocado na memória para melhorar a performance do scroll e quando damos mais alguns scrolls ela reutiliza a memória alocada para esses novos objetos sempre deixando reservado reservado um espaço de memória de 20 itens mais ou menos.

## **Comparação Real**

### VStack

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724508786037/48854407-23e8-4c86-b2b7-32b457cdef4a.png align="center")

Como vocês podem perceber no exemplo acima a **VStack** nem tinha terminado de carregar todos os elementos mas o uso da memória já estava em 2.07 GB

### LazyVStack

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724509197762/317676bc-f051-463c-bf43-38cf30a41ed3.png align="center")

Reparem que a **LazyVStack** alocou os elementos de maneira mais rápida e não consumiu memória desnecessária neste primeiro momento, entretanto basta fazer scroll para perceber que a alocação de memória só aumenta, nem fizemos tanto scroll assim e nosso uso de memória foi pra 248,8 MB, mostrando que realmente os objetos renderizados não removidos.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724509212278/6949b982-fe87-4c44-b023-c9e6bbdc6215.png align="center")

### List

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724509409264/e748e600-a9e0-43f9-995e-d558c0f7e730.png align="center")

A **List** em um primeiro momento se parece muito com a **LazyStack** somente aloca os elementos visíveis na memória mas basta realizar o scroll para vermos a diferença. Fizemos o scroll até o final da lista e pasmem o uso de memória foi de apenas 129,4 MB enquanto na **LazyStack** um simples scroll ja aumentou consideravelmente o uso de memória

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724509524815/49462385-fd53-4f13-b8dc-4a51687eabfd.png align="center")

## Conclusão

Não sou o dono da verdade eu acho que cada um sabe o que é melhor para usar em cada situação do seu projeto mas atualmente eu tenho feito da seguinte maneira:

* se são elementos estáticos e que não possuem scroll eu utilizo normalmente a **VStack** sem nenhum problema;
    
* se é alguma lista um pouco mais longa mas eu sei a quantidade de itens ou sei que a API retornará por exemplo um numero de itens relativamente baixo eu utilizo a **LazyVStack;**
    
* se for alguma lista com scroll infinito ou a API pode me mandar uma lista longa, sem controle de tamanho eu opto por utilizar a **List** mesmo sabendo que ela não é tão maleável assim.