Compose Hot Reload 1.0: Recarregamento em Tempo Real no Kotlin | Kotlin Brasil

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 — 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 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:

Se você ainda não conhece as novidades do Kotlin 2.3.20 ou do Kotlin 2.4.0 Beta, 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

[plugins]
composeHotReload = { id = "org.jetbrains.compose.hot-reload", version.ref = "composeHotReload" }

2. No build.gradle.kts do projeto raiz

plugins {
    alias(libs.plugins.composeHotReload) apply false
}

3. No build.gradle.kts do módulo

plugins {
    alias(libs.plugins.composeHotReload)
}

4. Adicione ao settings.gradle.kts

plugins {
    id("org.gradle.toolchains.foojay-resolver-convention") version "1.0.0"
}

Se você ainda usa Groovy no Gradle, vale considerar migrar para o Kotlin DSL — o suporte ao Hot Reload é mais fluido. Confira nosso tutorial de Gradle com Kotlin 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:

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:

./gradlew :myApp:hotRunJvm

Editando e recarregando

O fluxo é simples:

1. Faça suas alterações em qualquer 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:

@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 em remember e mutableStateOf são preservadas entre reloads, desde que a estrutura do composable permaneça compatível.

@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 com target desktop, o Hot Reload é significativamente superior.

Compose Hot Reload vs. Live Edit vs. Preview

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 para criar UIs declarativas que são fáceis de iterar
5. Use scope functions 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.

Se você ainda não experimentou, o setup é trivial para projetos novos e simples para projetos existentes. Com o Kotlin 2.4.0 chegando com context parameters estáveis e collection literals, o ecossistema Kotlin nunca esteve tão produtivo.

Para aprender mais sobre Compose, confira nosso guia completo de Jetpack Compose e o tutorial básico. 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.