0Pricing
Kotlin Multiplatform Academy · Aula

Estado e recomposição na interface compartilhada

Controle o Compose a partir do seu StateFlow compartilhado

Estado e recomposição na interface compartilhada é uma aula grátis de Kotlin Multiplatform Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Kotlin Multiplatform Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Kotlin Multiplatform Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

UI Is a Function of State

In Compose your screen is drawn from state. When the state changes, Compose redraws only the parts that depend on it. You never mutate views by hand.

Recomposition Explained

That automatic redraw is called recomposition. Compose re-runs the affected composables with the new values and updates the screen for you.

Remember Local State

For state owned by a composable, use remember with mutableStateOf so the value survives recomposition instead of resetting every frame.

val count = remember { mutableStateOf(0) }

Read and Write State

Wrap the value in by to read and write it like a normal variable. Reading it subscribes the composable, so writing triggers a redraw.

var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
    Text("Count: " + count)
}

Hoist State Upward

Move state to the lowest common parent and pass values down. This hoisting keeps child composables stateless, reusable and easy to test.

@Composable
fun Counter(value: Int, onInc: () -> Unit) {
    Button(onClick = onInc) { Text("" + value) }
}

State Lives in Shared Code

Your real source of truth is the shared layer. A cross-platform StateFlow holds screen state once, far from any platform UI framework.

val uiState: StateFlow<ScreenState> = _state

Collect StateFlow in Compose

Bridge that flow into Compose with collectAsState. The composable observes it and recomposes whenever the shared state emits a new value.

val state by viewModel.uiState.collectAsState()
Text(state.title)

One Source of Truth

Because state flows from shared code into Compose, Android and iOS render the exact same screen from a single source of truth. No drift.

Avoid Side Effects in Composables

A composable can run many times, so never do work like network calls directly in its body. Keep it a pure description and push effects elsewhere.

LaunchedEffect for Side Work

When you must start a coroutine tied to the UI, use LaunchedEffect. It runs once per key and cancels automatically when the composable leaves.

LaunchedEffect(Unit) {
    viewModel.load()
}

Derived and Stable State

Compute values from existing state with derivedStateOf so they recalculate only when their inputs change, keeping recomposition cheap.

Quick Check

What keeps a value across recompositions?

Recap: State Drives the UI

You learned that state drives recomposition, how to remember and hoist it, and how shared StateFlow feeds Compose so both apps render one truth. 🔁

Perguntas Frequentes

A aula “Estado e recomposição na interface compartilhada” é grátis?

Sim — o texto completo de “Estado e recomposição na interface compartilhada” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Kotlin Multiplatform Academy, atualize para CoddyKit PRO. O curso de Kotlin Multiplatform Academy inclui 4 aulas no total.

O que vou aprender em “Estado e recomposição na interface compartilhada”?

Controle o Compose a partir do seu StateFlow compartilhado Você pratica Kotlin Multiplatform Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Kotlin Multiplatform Academy?

Nenhuma experiência prévia é necessária. Kotlin Multiplatform Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Estado e recomposição na interface compartilhada”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Kotlin Multiplatform Academy?

Sim. Cada aula de Kotlin Multiplatform Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Ative o Compose Multiplatform
  2. Layouts, modificadores e tematização
  3. Estado e recomposição na interface compartilhada
  4. Hospede a interface compartilhada no iOS e no desktop
← Voltar para Kotlin Multiplatform Academy