Level 5

State Hoisting (Unidirectional Data Flow)

Unidirectional Data Flow

UI components should be dumb. They receive data (`state`) and emit events (`callbacks`). They shouldn't change state themselves.

📚 Explanation

State hoisting means moving state up to the nearest common ancestor. Child components receive state as parameters and emit events via callbacks. This makes components reusable and testable.

Note: Code execution is not available for Android/Kotlin in the browser. Use Android Studio to run and test the app.

kotlin

// 1. Dumb Component (Stateless)
@Composable
fun SearchBar(
    query: String,            // State comes down
    onQueryChanged: (String) -> Unit // Events go up
) {
    TextField(
        value = query,
        onValueChange = onQueryChanged
    )
}

// 2. Smart Parent (Stateful)
@Composable
fun SearchScreen() {
    var query by remember { mutableStateOf("") }

    // The parent manages the state and passes it down
    SearchBar(
        query = query,
        onQueryChanged = { newText -> query = newText }
    )
}

Back to Android Levels Back to Developer Hub