Jetpack Compose: Stateless X Stateful
Bem-vindes, Lucas Wottrich aqui :)
A ideia desse artigo é mostrar a diferença entre um componente Stateless(sem estado) e um componente Stateful(com estado) no Compose.
O projeto que estou usando como base:
O que é importante saber para entender o artigo:
- Ter uma noção básica de Jetpack Compose
- Ter uma noção intermediária de desenvolvimento android
Nível do artigo: Básico/Intermediário
🚉 Estado
Antes de continuarmos precisamos entender o que é um estado.
Estado em uma aplicação é qualquer valor que pode mudar com o tempo.
E isso abrange muitas coisas, desde de eventos que vem a partir de um clique do usuário que pode mudar o estado de um switch até algum request assíncrono que você está esperando de uma API para carregar uma tela.
👥 Stateless X Stateful
Com isso entramos nos estados do compose, que aqui estamos definido como:
- Stateless (Sem estado)
- Stateful (Com estado)
Ok, mas você deve estar perguntando, o que define um componente com estado e um componente sem estado? E a resposta é simples, ou pelo menos é para ser.
Um componente com estado é todo o componente que pode mudar com o tempo e um componente sem estado é todo o componente que não vai mudar com o tempo. Bingo!
Vamos ver alguns exemplos?
🌓 Stateful
Primeiro um componente Stateful:
@Composable
fun RememberPassword() {
val isRemember by mutableStateOf(false)
val rememberPasswordText =
if (isRemember) "vamos lembrar sua senha"
else "Devemos lembrar senha?" Button(onClick = { isRemember = !isRemember}) {
Text(text = rememberPasswordText)
}}
Aqui estamos fazendo um botão que dependendo do estado do isRemember ele troca o texto. Ou seja, o usuário clica e um estado muda, no nosso caso é o texto do botão que muda.
E aqui está o preview do nosso botão:
O texto do botão é definido como um estado por causa do mutableStateOf que carrega um state dizendo se o “remember password” está habilitado ou não.
Simples, não?
Mas agora vamos introduzir um outro problema:
Nós precisamos pegar o valor que está no isRemember para podermos avisar em algum lugar que queremos lembrar aquela senha.
💀 Stateless
Com esse problema conseguimos entrar no conceito de extração de estado de um componente, muito conhecido como stateless:
@Composable
fun PasswordBox() {
var isRemember by mutableStateOf(false)
RememberPassword(isRemember = isRemember) {
isRemember = !isRemember
}
}
@Composable
fun RememberPassword(isRemember: Boolean, onClick: () -> Unit) {
val rememberPasswordText =
if (isRemember) "vamos lembrar sua senha"
else "Devemos lembrar senha?"
Button(onClick = onClick) {
Text(text = rememberPasswordText)
}
}Agora nós passamos a responsabilidade do controle do estado para o pai do RememberPassword fazendo com que o mesmo se torne um componente stateless.
A vantagem de ter mais componentes stateless do que stateful é que eles ficam extremamente mais reutilizáveis e extremamente mais testáveis.
Um exemplo, por favor!!
Um exemplo bom é o que acabamos de fazer com o RememberPassword, quando ele era stateful nós tínhamos que rodar a aplicação e clicar no botão para testar os dois casos dele(habilitado e desabilitado), e agora que ele é stateless podemos fazer isso:
Dois previews testando os dois casos dele! E como falamos antes: aumentamos a sua usabilidade e testabilidade!
🍥 Conclusão
Entendemos, com exemplos simples, o quão importante é cada tipo de estado no compose e sei que você deve estar imaginando o tanto de coisa complexa e maluca que se pode fazer com esses estados que você viu por aqui!
Não se acanhe, deixe seu comentário com o que você está imaginando ou com alguma duvida, sugestão ou melhoria. :)
🎉 Obrigado!!
Chegamos no fim desse artigo, muito obrigado por ter separado esse tempo do seu dia para ler :)
Se você gostou e acha que eu mereço o seu 👏(clap), por favor, sinta-se a vontade. ❤️
Tenha um bom resto de dia!
Até a próxima.
Acompanhe nossas novidades em https://warren.com.br
