20 คำถามสัมภาษณ์ Jetpack Compose ยอดนิยมประจำปี 2026

// Compose: declarative - UI is a function of state
@Composable
fun Greeting(name: String) {
    // UI automatically updates when name changes
    Text(text = "Hello, $name!")
}

// XML equivalent requires:
// 1. Layout XML file
// 2. findViewById in Activity
// 3. Manual setText call
// textView.text = "Hello, $name!"

@Composable
fun Counter() {
    // When count changes, only this composable recomposes
    var count by remember { mutableStateOf(0) }

    Column {
        // This Text recomposes when count changes
        Text(text = "Count: $count")

        // This Button also recomposes (same scope)
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

// This composable does NOT recompose when count changes
@Composable
fun StaticHeader() {
    Text(text = "This never recomposes due to Counter")
}

@Composable
fun SearchBar() {
    // Lost on configuration change (rotation)
    var query by remember { mutableStateOf("") }

    // Survives configuration change
    var savedQuery by rememberSaveable { mutableStateOf("") }

    TextField(
        value = savedQuery,
        onValueChange = { savedQuery = it },
        placeholder = { Text("Search...") }
    )
}

@Composable
fun UserProfile(userId: String) {
    // Enters composition: effect starts
    // Recomposition: effect restarts if userId changes
    // Leaves composition: effect is cancelled
    LaunchedEffect(userId) {
        // Coroutine tied to this composable's lifecycle
        val user = repository.getUser(userId)
    }

    // DisposableEffect for cleanup
    DisposableEffect(Unit) {
        val listener = database.addListener { /* ... */ }
        onDispose {
            // Called when leaving composition
            listener.remove()
        }
    }
}

// Stateless: receives state, emits events
@Composable
fun EmailInput(
    email: String,
    onEmailChange: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    TextField(
        value = email,
        onValueChange = onEmailChange,
        label = { Text("Email") },
        modifier = modifier
    )
}

// Stateful: owns and manages state
@Composable
fun LoginScreen() {
    var email by rememberSaveable { mutableStateOf("") }
    var password by rememberSaveable { mutableStateOf("") }

    Column {
        EmailInput(
            email = email,
            onEmailChange = { email = it }
        )
        PasswordInput(
            password = password,
            onPasswordChange = { password = it }
        )
    }
}

@Composable
fun ShoppingCart(items: List<CartItem>) {
    // Without derivedStateOf: recomposes on EVERY list change
    // val total = items.sumOf { it.price }

    // With derivedStateOf: recomposes only when total changes
    val total by remember(items) {
        derivedStateOf { items.sumOf { it.price } }
    }

    // Only recomposes when hasDiscount value changes
    val hasDiscount by remember(total) {
        derivedStateOf { total > 100.0 }
    }

    Text("Total: $$total")
    if (hasDiscount) {
        Text("Discount applied!")
    }
}

// ViewModel with StateFlow
class UserViewModel : ViewModel() {
    private val _uiState = MutableStateFlow(UserUiState())
    val uiState: StateFlow<UserUiState> = _uiState.asStateFlow()

    fun updateName(name: String) {
        _uiState.update { it.copy(name = name) }
    }
}

data class UserUiState(
    val name: String = "",
    val isLoading: Boolean = false
)

// Composable collecting StateFlow
@Composable
fun UserScreen(viewModel: UserViewModel = viewModel()) {
    // collectAsState bridges StateFlow to Compose State
    val uiState by viewModel.uiState.collectAsState()

    if (uiState.isLoading) {
        CircularProgressIndicator()
    } else {
        Text(uiState.name)
    }
}

@Composable
fun AnalyticsScreen(screenName: String) {
    // LaunchedEffect: runs suspend function, restarts on key change
    LaunchedEffect(screenName) {
        analytics.logScreenView(screenName)
    }

    // DisposableEffect: setup + cleanup
    DisposableEffect(Unit) {
        val observer = LifecycleEventObserver { _, event ->
            if (event == Lifecycle.Event.ON_RESUME) {
                analytics.logResume()
            }
        }
        lifecycle.addObserver(observer)
        onDispose {
            lifecycle.removeObserver(observer)
        }
    }

    // SideEffect: runs on every successful recomposition
    SideEffect {
        // Update non-Compose state
        analyticsHelper.setCurrentScreen(screenName)
    }
}

@Composable
fun ActionButton() {
    // rememberCoroutineScope: for event-driven coroutines
    val scope = rememberCoroutineScope()

    Button(onClick = {
        scope.launch {
            // Cannot use LaunchedEffect here (not composable context)
            performAction()
        }
    }) {
        Text("Execute")
    }
}

@Composable
fun SearchScreen(query: String) {
    var results by remember { mutableStateOf<List<Result>>(emptyList()) }

    // Debounced search: cancels previous on new query
    LaunchedEffect(query) {
        delay(300) // debounce
        results = searchRepository.search(query)
    }
}

@Composable
fun InfiniteAnimation() {
    val infiniteTransition = rememberInfiniteTransition(label = "pulse")
    val alpha by infiniteTransition.animateFloat(
        initialValue = 0.3f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(1000),
            repeatMode = RepeatMode.Reverse
        ),
        label = "alpha"
    )

    Box(
        modifier = Modifier
            .size(100.dp)
            .alpha(alpha)
            .background(Color.Blue)
    )
}

@Composable
fun UserList(users: List<User>) {
    LazyColumn(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(
            items = users,
            // Key helps Compose track items across changes
            key = { user -> user.id }
        ) { user ->
            UserCard(user = user)
        }
    }
}

// Optimized with remember and stable types
@Composable
fun UserCard(user: User) {
    // Skipped during recomposition if user hasn't changed
    Card {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = user.name, style = MaterialTheme.typography.titleMedium)
            Text(text = user.email, style = MaterialTheme.typography.bodyMedium)
        }
    }
}

@Composable
fun StaggeredGrid(
    modifier: Modifier = Modifier,
    columns: Int = 2,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier
    ) { measurables, constraints ->
        val columnWidth = constraints.maxWidth / columns
        val itemConstraints = constraints.copy(
            minWidth = columnWidth,
            maxWidth = columnWidth
        )

        // Measure phase
        val placeables = measurables.map { it.measure(itemConstraints) }

        // Track height per column
        val columnHeights = IntArray(columns)
        val positions = placeables.map { placeable ->
            val col = columnHeights.indexOfMin()
            val position = IntOffset(col * columnWidth, columnHeights[col])
            columnHeights[col] += placeable.height
            position
        }

        val height = columnHeights.max()

        // Place phase
        layout(constraints.maxWidth, height) {
            placeables.forEachIndexed { index, placeable ->
                placeable.placeRelative(positions[index])
            }
        }
    }
}

// Custom theme definition
@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) {
        darkColorScheme(
            primary = Color(0xFFBB86FC),
            secondary = Color(0xFF03DAC6),
            background = Color(0xFF121212)
        )
    } else {
        lightColorScheme(
            primary = Color(0xFF6200EE),
            secondary = Color(0xFF03DAC6),
            background = Color(0xFFFFFFFF)
        )
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = AppTypography,
        shapes = AppShapes,
        content = content
    )
}

// Usage in composables
@Composable
fun ThemedButton() {
    Button(
        onClick = { },
        colors = ButtonDefaults.buttonColors(
            containerColor = MaterialTheme.colorScheme.primary
        )
    ) {
        Text(
            text = "Themed",
            style = MaterialTheme.typography.labelLarge
        )
    }
}

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        composable("home") {
            HomeScreen(
                onNavigateToDetail = { id ->
                    navController.navigate("detail/$id")
                }
            )
        }

        composable(
            route = "detail/{itemId}",
            arguments = listOf(
                navArgument("itemId") { type = NavType.StringType }
            )
        ) { backStackEntry ->
            val itemId = backStackEntry.arguments?.getString("itemId")
            DetailScreen(itemId = itemId)
        }

        composable("settings") {
            SettingsScreen(
                onBack = { navController.popBackStack() }
            )
        }
    }
}

// Simple arguments via route
navController.navigate("detail/${item.id}")

// Complex data via savedStateHandle
class DetailViewModel(
    savedStateHandle: SavedStateHandle
) : ViewModel() {
    val itemId: String = checkNotNull(savedStateHandle["itemId"])

    // Or pass result back to previous screen
    fun setResult(result: String) {
        savedStateHandle["result"] = result
    }
}

// Reading result in previous screen
@Composable
fun ListScreen(navController: NavController) {
    val result = navController.currentBackStackEntry
        ?.savedStateHandle
        ?.getStateFlow<String>("result", "")
        ?.collectAsState()

    // Use result
}

// Type-safe navigation (recommended)
@Serializable
data class DetailRoute(val itemId: String)

// In NavHost
composable<DetailRoute> { backStackEntry ->
    val route = backStackEntry.toRoute<DetailRoute>()
    DetailScreen(itemId = route.itemId)
}

// Stable data class - Compose can skip recomposition
@Immutable
data class UserData(
    val id: String,
    val name: String,
    val avatarUrl: String
)

// Lambda stabilization with remember
@Composable
fun ParentScreen(viewModel: MyViewModel = viewModel()) {
    // Without remember: new lambda instance on every recomposition
    // UserList(onItemClick = { id -> viewModel.selectItem(id) })

    // With remember: stable lambda reference
    val onItemClick = remember<(String) -> Unit> {
        { id -> viewModel.selectItem(id) }
    }

    UserList(onItemClick = onItemClick)
}

// Using key to control recomposition scope
@Composable
fun ItemList(items: List<Item>) {
    LazyColumn {
        items(items, key = { it.id }) { item ->
            // Each item recomposes independently
            key(item.id) {
                ItemRow(item = item)
            }
        }
    }
}

// Recomposition counter (debug only)
@Composable
fun DebugRecomposition(tag: String) {
    if (BuildConfig.DEBUG) {
        val recompositionCount = remember { mutableIntStateOf(0) }
        SideEffect {
            recompositionCount.intValue++
        }
        Log.d("Recomposition", "$tag: ${recompositionCount.intValue}")
    }
}

// Performance tracing
@Composable
fun TracedScreen() {
    trace("TracedScreen") {
        // Content here is measured in system trace
        HeavyContent()
    }
}

// Baseline profiles for startup optimization
@ExperimentalBaselineProfilesApi
class BaselineProfileGenerator {
    @get:Rule
    val rule = BaselineProfileRule()

    @Test
    fun generateProfile() {
        rule.collect("com.example.app") {
            startActivityAndWait()
            // Navigate through critical user flows
        }
    }
}

@Composable
fun ModifierOrderDemo() {
    // Order 1: padding THEN background
    // Background covers padded area
    Box(
        modifier = Modifier
            .padding(16.dp)
            .background(Color.Red)
            .size(100.dp)
    )

    // Order 2: background THEN padding
    // Background extends to full size, padding is inside
    Box(
        modifier = Modifier
            .background(Color.Blue)
            .padding(16.dp)
            .size(100.dp)
    )

    // Clickable area depends on order
    Box(
        modifier = Modifier
            .padding(16.dp)        // Padding outside clickable
            .clickable { }          // Click area
            .padding(8.dp)          // Padding inside clickable
            .background(Color.Green)
    )
}

// Sealed interface for complete state representation
sealed interface HomeUiState {
    data object Loading : HomeUiState
    data class Success(
        val articles: List<Article>,
        val isRefreshing: Boolean = false
    ) : HomeUiState
    data class Error(val message: String) : HomeUiState
}

class HomeViewModel(
    private val repository: ArticleRepository
) : ViewModel() {
    val uiState: StateFlow<HomeUiState> = repository
        .getArticles()
        .map<List<Article>, HomeUiState> { HomeUiState.Success(it) }
        .catch { emit(HomeUiState.Error(it.message ?: "Unknown error")) }
        .stateIn(
            scope = viewModelScope,
            started = SharingStarted.WhileSubscribed(5000),
            initialValue = HomeUiState.Loading
        )

    fun refresh() {
        viewModelScope.launch {
            // Update state to show refreshing
            repository.refresh()
        }
    }
}

// Composable consumes UiState
@Composable
fun HomeScreen(viewModel: HomeViewModel = viewModel()) {
    val uiState by viewModel.uiState.collectAsState()

    when (val state = uiState) {
        is HomeUiState.Loading -> LoadingIndicator()
        is HomeUiState.Success -> ArticleList(
            articles = state.articles,
            onRefresh = viewModel::refresh
        )
        is HomeUiState.Error -> ErrorMessage(state.message)
    }
}

class LoginScreenTest {
    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun loginButton_disabledWhenFieldsEmpty() {
        composeTestRule.setContent {
            LoginScreen()
        }

        // Find by test tag
        composeTestRule
            .onNodeWithTag("loginButton")
            .assertIsNotEnabled()
    }

    @Test
    fun loginButton_enabledWhenFieldsFilled() {
        composeTestRule.setContent {
            LoginScreen()
        }

        // Type in fields
        composeTestRule
            .onNodeWithTag("emailField")
            .performTextInput("test@example.com")

        composeTestRule
            .onNodeWithTag("passwordField")
            .performTextInput("password123")

        // Verify button is enabled
        composeTestRule
            .onNodeWithTag("loginButton")
            .assertIsEnabled()
    }

    @Test
    fun errorMessage_displayedOnFailure() {
        composeTestRule.setContent {
            LoginScreen()
        }

        // Verify error message appears
        composeTestRule
            .onNodeWithText("Invalid credentials")
            .assertExists()
    }
}

// Compose inside XML layout
class ExistingFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(
                ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
            )
            setContent {
                AppTheme {
                    NewComposeFeature()
                }
            }
        }
    }
}

// XML View inside Compose
@Composable
fun LegacyMapView() {
    AndroidView(
        factory = { context ->
            // Create traditional Android View
            MapView(context).apply {
                // Configure the view
                onCreate(Bundle())
            }
        },
        update = { mapView ->
            // Update view when state changes
            mapView.getMapAsync { map ->
                map.moveCamera(CameraUpdateFactory.newLatLng(location))
            }
        },
        onRelease = { mapView ->
            // Cleanup when leaving composition
            mapView.onDestroy()
        }
    )
}