Como o Jetpack Compose Simplifica o Gerenciamento de Estado

Introdução

O Jetpack Compose, a nova biblioteca de UI declarativa do Android, tem transformado o desenvolvimento Android, tornando-o mais intuitivo e eficiente. Uma das áreas mais beneficiadas é o gerenciamento de estado. Bora explorar como essa nova abordagem facilita a vida dos desenvolvedores?

O que é estado?

No contexto de uma UI, o estado refere-se a qualquer informação que possa mudar durante a vida útil do aplicativo. Pode ser um texto em um TextField, a seleção de um item em um DropdownMenu, ou até mesmo a visibilidade de um componente.

Gerenciamento de Estado Tradicional

Tradicionalmente, o estado em aplicativos Android era gerenciado através de Views e observadores, usando frameworks como LiveData e ViewModel. Isso podia tornar o código fragmentado e difícil de seguir, pois era necessário sincronizar manualmente a UI com as mudanças de estado.

Abordagem Declarativa

No Compose, a interface do usuário é construída de maneira declarativa. Isso significa que você descreve como a UI deve parecer para um determinado estado, e o Compose se encarrega de atualizar a UI automaticamente sempre que esse estado muda.

@Composable
fun MyScreen() {
  var count by remember { mutableStateOf(0) }
  Button(onClick = { count++ }) {
      Text("Count: $count")
  }
}

No exemplo acima, a função MyScreen declara um botão que exibe um contador. Sempre que o botão é clicado, o estado count é incrementado, e o Compose atualiza automaticamente o texto exibido no botão.

State Hoisting

O Compose recomenda a prática de state hoisting, que envolve mover o estado para o nível mais alto possível onde ele pode ser gerenciado e compartilhado facilmente. Isso facilita a composição de UIs complexas a partir de componentes menores e reutilizáveis.

@Composable
fun Counter(count: Int, onIncrement: () -> Unit) {
  Button(onClick = onIncrement) {
      Text("Count: $count")
  }
}

@Composable
fun MyScreen() {
  var count by remember { mutableStateOf(0) }
  Counter(count = count, onIncrement = { count++ })
}

No exemplo acima, a função Counter recebe o estado count e uma função onIncrement como parâmetros. Ela exibe um botão que, ao ser clicado, chama a função onIncrement. A função MyScreen gerencia o estado count e passa esse estado e a função de incremento para o componente Counter.

remember e mutableStateOf

Para armazenar e lembrar estados em composables, o Compose oferece o remember e mutableStateOf. O remember permite que os composables memorizem o estado através de recomposições, e mutableStateOf cria um estado mutável que, quando alterado, causa a recomposição dos composables que o utilizam.

var text by remember { mutableStateOf("") }

Neste exemplo, a variável text é declarada usando remember e mutableStateOf, permitindo que o estado dela seja memorizado através de recomposições.

State in ViewModels

Para estados que precisam sobreviver a mudanças de configuração, como rotações de tela, é recomendável armazenar o estado em ViewModels, que são gerenciados pelo Android Jetpack Lifecycle.

class MyViewModel : ViewModel() {
  private val _count = MutableLiveData(0)
  val count: LiveData<Int> = _count

  fun increment() {
      _count.value = (_count.value ?: 0) + 1
  }
}

@Composable
fun MyScreen(viewModel: MyViewModel = viewModel()) {
  val count by viewModel.count.observeAsState(0)
  Button(onClick = { viewModel.increment() }) {
      Text("Count: $count")
  }
}

No exemplo acima, a classe MyViewModel gerencia o estado count usando MutableLiveData. A função increment incrementa o valor de count. No composable MyScreen, o estado count do ViewModel é observado e atualizado automaticamente quando viewModel.increment() é chamado.

Ferramentas Adicionais

Compose oferece ferramentas adicionais como derivedStateOf para criar estados derivados e snapshotFlow para converter estados do Compose em fluxos de dados. Essas ferramentas aumentam ainda mais a flexibilidade e o poder do gerenciamento de estado.

Conclusão

O Compose simplifica o gerenciamento de estado ao adotar uma abordagem declarativa, eliminando a necessidade de sincronização manual da UI. Com práticas e ferramentas poderosas, ele não só torna o desenvolvimento mais rápido, mas também mais intuitivo e sustentável a longo prazo. Essas facilidades permitem que os desenvolvedores se concentrem mais na lógica de negócios e menos em detalhes de implementação, resultando em um código mais limpo e fácil de manter.

Esse artigo foi construído para fins didáticos com auxílio de IAs. Os passos para sua criação encontram-se no meu GitHub. Houve intercepção humana para validação e revisão do conteúdo gerado. Para conexão, sugestões ou dúvidas, contate-me nas redes: @github @linkedin

#Android #JetpackCompose #StateManagement