--- title: "Compose Hot Reload 1.0: Recarregamento em Tempo Real no Kotlin | Kotlin Brasil" url: "https://kotlin.dev.br/blog/compose-hot-reload-kotlin-2026/" markdown_url: "https://kotlin.dev.br/blog/compose-hot-reload-kotlin-2026.MD" description: "Aprenda a usar o Compose Hot Reload 1.0 estável no Kotlin. Setup, configuração Gradle, como funciona e dicas práticas para produtividade." date: "2026-04-23" author: "Karina Melo" --- # Compose Hot Reload 1.0: Recarregamento em Tempo Real no Kotlin | Kotlin Brasil Aprenda a usar o Compose Hot Reload 1.0 estável no Kotlin. Setup, configuração Gradle, como funciona e dicas práticas para produtividade. Se você desenvolve com Jetpack Compose ou Compose Multiplatform, já sabe como pode ser frustrante esperar o rebuild completo da aplicação só para ver uma mudança de padding ou cor. Com o lançamento do **Compose Hot Reload 1.0.0** — agora estável e empacotado no [Compose Multiplatform 1.10](/blog/compose-multiplatform-1-10-6-2026/) — esse problema acabou. Você edita o código, salva, e a UI atualiza em tempo real, sem reiniciar o app. Neste artigo, vamos explorar como funciona, como configurar no seu projeto, e dicas práticas para extrair o máximo dessa ferramenta. ## O que é o Compose Hot Reload? O Compose Hot Reload permite que você edite código de composables e funções e veja o resultado imediatamente na aplicação em execução. Não é um preview isolado — é o **app real** rodando com todas as dependências, estado e dados, atualizando em tempo real conforme você salva o código. Diferente do Live Edit do Android Studio, o Compose Hot Reload funciona em **desktop** com Compose Multiplatform e usa uma tecnologia mais robusta por baixo dos panos: o **DCEVM** (Dynamic Code Evolution Virtual Machine) do JetBrains Runtime. Se você já usa [Compose Multiplatform para desktop](/blog/kotlin-compose-multiplatform-desktop/) ou está planejando migrar, essa feature muda completamente o fluxo de desenvolvimento. ## Como funciona por baixo dos panos A mágica acontece em três etapas: 1. **Verificação**: quando você salva o arquivo, o runtime valida os novos `.class` compilados para garantir compatibilidade 2. **Carregamento**: as classes são carregadas em um "universo paralelo" que representa o estado pós-reload 3. **Transferência de estado**: um passo especializado de garbage collection migra objetos existentes para acomodar as novas definições de classes O diferencial do DCEVM em relação à JVM padrão é que ele permite mudanças muito mais amplas — incluindo **adicionar classes novas**, **modificar propriedades** e **remover funções** — não apenas alterar o corpo de métodos existentes. O sistema usa um mecanismo de **hot vs. cold classpath**: dependências remotas (bibliotecas, SDKs) ficam estáticas, enquanto o código compilado localmente é atualizado dinamicamente. Checksums são mantidos para detectar mudanças de forma eficiente. ## Requisitos Antes de começar, verifique se seu ambiente atende aos requisitos: | Requisito | Versão mínima | |-----------|---------------| | Kotlin | 2.1.20+ | | Compose Multiplatform | 1.10.0+ | | JVM Target | Java 21 ou anterior | | Runtime | JetBrains Runtime (JBR) | | IDE | IntelliJ IDEA 2025.2.2+ ou Android Studio Otter 2025.2.1+ | Se você ainda não conhece as novidades do [Kotlin 2.3.20](/blog/kotlin-2-3-20-novidades/) ou do [Kotlin 2.4.0 Beta](/blog/kotlin-2-4-0-beta-novidades-2026/), vale se atualizar — ambas as versões funcionam perfeitamente com o Hot Reload. ## Configurando em um projeto novo Se você está criando um projeto novo no IntelliJ IDEA, o setup é automático: 1. **File → New → Project → Kotlin Multiplatform** 2. Selecione o target **Desktop** 3. Pronto — o Compose Hot Reload já vem habilitado Nenhuma configuração adicional necessária. O plugin Gradle é adicionado automaticamente quando o projeto inclui um target desktop. ## Configurando em um projeto existente Se você tem um projeto Compose Multiplatform anterior à versão 1.10, adicione manualmente: ### 1. Adicione ao `gradle/libs.versions.toml` ```toml [plugins] composeHotReload = { id = "org.jetbrains.compose.hot-reload", version.ref = "composeHotReload" } ``` ### 2. No `build.gradle.kts` do projeto raiz ```kotlin plugins { alias(libs.plugins.composeHotReload) apply false } ``` ### 3. No `build.gradle.kts` do módulo ```kotlin plugins { alias(libs.plugins.composeHotReload) } ``` ### 4. Adicione ao `settings.gradle.kts` ```kotlin plugins { id("org.gradle.toolchains.foojay-resolver-convention") version "1.0.0" } ``` Se você ainda usa [Groovy no Gradle](/comparacoes/gradle-kotlin-vs-groovy/), vale considerar migrar para o Kotlin DSL — o suporte ao Hot Reload é mais fluido. Confira nosso [tutorial de Gradle com Kotlin](/tutoriais/kotlin-gradle-tutorial/) para detalhes. ## Usando na prática ### Executando o app No seu `main.kt`, configure a janela com `alwaysOnTop = true` para manter o app visível enquanto edita: ```kotlin fun main() = application { Window( onCloseRequest = ::exitApplication, alwaysOnTop = true, title = "Meu App Kotlin", ) { App() } } ``` Para iniciar com Hot Reload, você tem duas opções: **Via IDE**: clique no ícone de Run no gutter e selecione **"Run with Compose Hot Reload"** **Via terminal**: ```bash ./gradlew :myApp:hotRunJvm ``` ### Editando e recarregando O fluxo é simples: 1. Faça suas alterações em qualquer [composable](/glossario/composable/) 2. Salve o arquivo (**⌘S** no macOS, **Ctrl+S** no Linux/Windows) 3. A UI atualiza automaticamente Veja um exemplo prático. Suponha que você tem este composable: ```kotlin @Composable fun CartaoUsuario(nome: String) { Card( modifier = Modifier .fillMaxWidth() .padding(16.dp), elevation = CardDefaults.cardElevation(4.dp) ) { Column(modifier = Modifier.padding(16.dp)) { Text( text = "Olá, $nome!", style = MaterialTheme.typography.headlineMedium ) Spacer(modifier = Modifier.height(8.dp)) Text( text = "Bem-vindo ao app", style = MaterialTheme.typography.bodyLarge, color = MaterialTheme.colorScheme.onSurfaceVariant ) } } } ``` Agora mude o padding, a cor, adicione um ícone — salve e veja a mudança instantaneamente no app em execução. Sem rebuild, sem reinício. ### A toolbar flutuante Quando o app está rodando com Hot Reload, uma toolbar flutuante aparece no canto da janela mostrando: - **Status do reload**: se está compilando, carregando ou pronto - **Logs**: mensagens de depuração do processo de reload - **Controle manual**: botão para forçar reload quando necessário Se houver erro de compilação, ele aparece diretamente na janela do app — sem precisar voltar para a IDE para ver o stacktrace. ## Preservação de estado Uma das maiores vantagens do Hot Reload sobre simplesmente reiniciar o app é a **preservação de estado**. Variáveis de [estado](/glossario/state/) em `remember` e `mutableStateOf` são preservadas entre reloads, desde que a estrutura do composable permaneça compatível. ```kotlin @Composable fun Contador() { var contagem by remember { mutableStateOf(0) } Column(horizontalAlignment = Alignment.CenterHorizontally) { Text("Contagem: $contagem", style = MaterialTheme.typography.displaySmall) Spacer(modifier = Modifier.height(16.dp)) Button(onClick = { contagem++ }) { Text("Incrementar") } } } ``` Se você incrementar o contador para 15 e depois mudar o texto do botão de "Incrementar" para "Adicionar +1", ao salvar o valor 15 será preservado. Isso é essencial para testar estados complexos — como formulários preenchidos ou listas com scroll — sem perder o progresso. ## Limitações atuais Apesar de estável, o Compose Hot Reload tem algumas limitações que você precisa conhecer: - **Apenas desktop por enquanto**: suporte a Android e iOS está sendo explorado, mas ainda não disponível - **Java 21 ou anterior**: projetos que usam Java 22+ precisam ajustar o target - **JetBrains Runtime obrigatório**: não funciona com OpenJDK ou Oracle JDK padrão - **Mudanças estruturais profundas**: alterações muito grandes (como renomear packages inteiros) podem exigir restart Para projetos Android, o Live Edit no Android Studio continua sendo a alternativa. Mas se você usa [Kotlin Multiplatform](/blog/kotlin-multiplatform/) com target desktop, o Hot Reload é significativamente superior. ## Compose Hot Reload vs. Live Edit vs. Preview | Feature | Hot Reload | Live Edit | Compose Preview | |---------|-----------|-----------|-----------------| | App real rodando | ✅ | ✅ | ❌ | | Preserva estado | ✅ | Parcial | ❌ | | Sem restart | ✅ | ✅ | ✅ | | Desktop | ✅ | ❌ | ✅ | | Android | ❌ | ✅ | ✅ | | Mudanças estruturais | ✅ | Limitado | ✅ | ## Dicas para produtividade máxima 1. **Use `alwaysOnTop = true`** na janela para manter o app visível ao lado da IDE 2. **Organize composables pequenos** — mudanças em funções menores recarregam mais rápido 3. **Aproveite a preservação de estado** para testar edge cases sem recriar o cenário 4. **Combine com [Kotlin DSL](/glossario/dsl/)** para criar UIs declarativas que são fáceis de iterar 5. **Use [scope functions](/blog/scope-functions-kotlin/)** como `apply` e `also` para configurações rápidas durante experimentação ## Conclusão O Compose Hot Reload 1.0 é um marco para o desenvolvimento com Kotlin e Compose. A capacidade de ver mudanças em tempo real, sem perder estado, transforma completamente o fluxo de trabalho — especialmente para quem desenvolve apps desktop com [Compose Multiplatform](/blog/kotlin-compose-multiplatform-ui-2026/). Se você ainda não experimentou, o setup é trivial para projetos novos e simples para projetos existentes. Com o [Kotlin 2.4.0](/blog/kotlin-2-4-0-beta-novidades-2026/) chegando com [context parameters estáveis](/glossario/context-receiver/) e [collection literals](#), o ecossistema Kotlin nunca esteve tão produtivo. Para aprender mais sobre Compose, confira nosso [guia completo de Jetpack Compose](/guias/guia-jetpack-compose/) e o [tutorial básico](/tutoriais/jetpack-compose-basico/). Se você também trabalha com desenvolvimento nativo de alta performance, vale conhecer como Rust e Zig abordam hot reload e build incremental em seus ecossistemas. --- ## Perguntas Frequentes ### O Compose Hot Reload funciona no Android? Não, atualmente o Compose Hot Reload 1.0 funciona apenas em targets **desktop** (JVM). Para Android, use o Live Edit do Android Studio. A JetBrains está explorando suporte a outras plataformas em versões futuras. ### Preciso de alguma configuração especial para usar? Se seu projeto usa Compose Multiplatform 1.10+ com target desktop, o Hot Reload já vem habilitado automaticamente. Para projetos mais antigos, basta adicionar o plugin Gradle `org.jetbrains.compose.hot-reload` e sincronizar. ### O estado da aplicação é preservado durante o reload? Sim, variáveis em `remember` e `mutableStateOf` são preservadas entre reloads, desde que a estrutura do composable permaneça compatível. Isso permite testar mudanças visuais sem perder dados como formulários preenchidos ou posição de scroll. ### Qual a diferença entre Hot Reload e Compose Preview? O Hot Reload atualiza o **app real em execução** com todas as dependências e estado, enquanto o Preview renderiza composables isoladamente. O Hot Reload preserva estado entre edições e suporta mudanças estruturais mais amplas, como adicionar novas classes.