State Hoisting & UDF in Compose

Copy code// ❌ Stateful composable — tightly couples state to UI; hard to test or reuse
@Composable
fun SearchBar() {
    var query by remember { mutableStateOf("") }
    TextField(value = query, onValueChange = { query = it })
    // How would a parent react to query changes? It can't.
}

Copy code// ✅ Stateless — state lives outside; composable is pure UI
@Composable
fun SearchBar(
    query: String,                       // state flows DOWN
    onQueryChanged: (String) -> Unit     // events flow UP
) {
    TextField(value = query, onValueChange = onQueryChanged)
}

// Caller owns the state:
@Composable
fun SearchScreen() {
    var query by remember { mutableStateOf("") }
    SearchBar(
        query = query,
        onQueryChanged = { query = it }
    )
}

Copy code// UiState — describes everything the UI needs to render
data class ArticleListState(
    val articles: List<Article> = emptyList(),
    val isLoading: Boolean = false,
    val error: String? = null,
    val query: String = ""
)

// UiEvent — everything the user can do
sealed class ArticleListEvent {
    data class Search(val query: String) : ArticleListEvent()
    data class BookmarkArticle(val id: String) : ArticleListEvent()
    object Retry : ArticleListEvent()
}

class ArticleListViewModel(
    private val repository: ArticleRepository
) : ViewModel() {

    private val _state = MutableStateFlow(ArticleListState())
    val state: StateFlow<ArticleListState> = _state.asStateFlow()

    fun onEvent(event: ArticleListEvent) {
        when (event) {
            is ArticleListEvent.Search -> search(event.query)
            is ArticleListEvent.BookmarkArticle -> bookmark(event.id)
            ArticleListEvent.Retry -> retry()
        }
    }

    private fun search(query: String) {
        _state.update { it.copy(query = query, isLoading = true) }
        viewModelScope.launch {
            repository.search(query)
                .onSuccess { articles ->
                    _state.update { it.copy(articles = articles, isLoading = false) }
                }
                .onFailure { error ->
                    _state.update { it.copy(error = error.message, isLoading = false) }
                }
        }
    }
}

Copy code@Composable
fun ArticleListScreen(viewModel: ArticleListViewModel = viewModel()) {
    val state by viewModel.state.collectAsStateWithLifecycle()

    ArticleListContent(
        state = state,
        onEvent = viewModel::onEvent
    )
}

// This composable is pure — no ViewModel dependency, fully testable
@Composable
fun ArticleListContent(
    state: ArticleListState,
    onEvent: (ArticleListEvent) -> Unit
) {
    when {
        state.isLoading -> CircularProgressIndicator()
        state.error != null -> ErrorView(state.error, onRetry = { onEvent(ArticleListEvent.Retry) })
        else -> LazyColumn {
            items(state.articles) { article ->
                ArticleItem(
                    article = article,
                    onBookmark = { onEvent(ArticleListEvent.BookmarkArticle(article.id)) }
                )
            }
        }
    }
}

Copy code// Use SharedFlow for one-time events
class ViewModel : ViewModel() {
    private val _effect = MutableSharedFlow<UiEffect>()
    val effect: SharedFlow<UiEffect> = _effect.asSharedFlow()

    private fun onLoginSuccess() {
        viewModelScope.launch {
            _effect.emit(UiEffect.NavigateToHome)
        }
    }
}

sealed class UiEffect {
    object NavigateToHome : UiEffect()
    data class ShowSnackbar(val message: String) : UiEffect()
}

// In composable:
LaunchedEffect(Unit) {
    viewModel.effect.collect { effect ->
        when (effect) {
            UiEffect.NavigateToHome -> navController.navigate("home")
            is UiEffect.ShowSnackbar -> snackbarHostState.showSnackbar(effect.message)
        }
    }
}