Compose Flashcards
What is Compose used for?
Compose is used to develop UI in a declarative and flexible way instead of using XML.
How does Compose simplify UI development?
It simplifies UI development by making it easier to manage state, handle updates efficiently, and create reusable UI elements.
How are UI elements defined in Compose?
UI elements are defined as composable functions in Kotlin.
What is declarative UI?
Declarative UI describes what the UI should look like, and it automatically updates when the state changes. It makes UI development more efficient and eliminates the need for manual updates.
How is traditional UI different from declarative UI?
Traditional UI describes how the UI should be built, requiring manual updates when the state changes.
What is the remember keyword used for in Compose?
It is used to retain data across recompositions until the composable is removed.
What happens if you don’t use remember in a composable function?
Without remember, all variables inside a composable function would be created on every recomposition.
What is Recomposition in Compose?
Recomposition is the process of updating the UI when the state changes.
How does Recomposition improve efficiency in Compose?
Instead of recreating the entire UI, Compose only re-executes the parts that depend on the updated state, making UI updates more efficient and avoiding unnecessary recomputation.
What is state hoisting in Compose?
State hoisting means that a composable doesn’t manage its own state but instead receives the state and a way to update it from its parent.
What are the benefits of state hoisting?
It makes the composable stateless, more reusable, and easier to manage.
What are side effects in Compose?
Side effects indicate changes to the state or other app behaviors that happen outside the scope of a composable function.
What typically triggers side effects in Compose?
Side effects are typically triggered by user interactions or external events and can affect the state and UI.
What is CompositionLocal in Compose?
CompositionLocal is used to pass data down the UI tree without passing it as a parameter to every composable.
What are the benefits of CompositionLocal?
It helps reduce boilerplate code while keeping the data accessible only within the defined scope.
How do you use CompositionLocal in Compose?
- Create a CompositionLocal variable.
- Use CompositionLocalProvider to set a value for the CompositionLocal.
- Retrieve the value using .current inside a composable.
What is State Management in Compose?
Compose encourages unidirectional data flow, meaning the state flows down, events flow up, and the UI reacts to state changes.
How does unidirectional data flow help in Compose?
It ensures better state control, predictability, and easier debugging by keeping state changes centralized.
What is rememberCoroutineScope in Compose?
It provides a coroutine scope tied to the lifecycle of a composable, ensuring all launched coroutines are automatically canceled when the composable is destroyed.
Why use rememberCoroutineScope?
It helps manage coroutines safely within a composable, preventing memory leaks and unnecessary background tasks.
How do you convert a Flow or LiveData into a Compose state?
Use collectAsState for Flow and observeAsState for LiveData.
How do you convert regular data into a Compose state?
Use remember with mutableStateOf.
How do you transform asynchronous results or side effects into a Compose state?
Use produceState, which requires an initial value.
How do you derive a new state from an existing state in Compose?
Use derivedStateOf.
What is derivedStateOf in Compose?
It is used to create a state derived from another state, ensuring recomposition is triggered only when the derived state changes, not every time the original state changes.
Why use derivedStateOf in Compose?
It optimizes recomposition by preventing unnecessary UI updates when the original state changes frequently but the derived state remains the same.
What is rememberUpdatedState in Compose?
It is used to create a state that always refers to the latest value of another state, ensuring the latest value is used even after recomposition or inside side effects.
When should you use rememberUpdatedState?
Use it when a value needs to stay up-to-date inside long-lived operations like coroutines or side effects without causing unnecessary recompositions.
What is rememberSaveable in Compose?
It is used to retain state across recompositions and configuration changes by saving the state value to a bundle and restoring it when the composable is recreated.
Why should you use rememberSaveable?
It helps preserve the state of a composable even when the app goes through configuration changes (like screen rotations) or recompositions.
What happens during the initial composition of a composable?
The composable first enters the screen. The composer evaluates the UI tree and creates the UI elements.
What is recomposition in Compose?
Recomposition happens when the state of the composable changes. Only the affected parts of the composable are recomposed, not the entire composable.
What does skipping mean during recomposition?
During recomposition, if the state of the composable hasn’t changed, the composable is skipped in the process.
What happens during the disposal phase of a composable’s lifecycle?
When the composable leaves the screen, it is removed from the composition.
How do you handle lifecycle events in Compose?
- Launch a DisposableEffect tied to the lifecycle of the composable.
- Inside the DisposableEffect, create the observer tied to the lifecycle owner to observe the lifecycle changes.
- Remove the observer from the lifecycle owner in the onDispose callback for cleanup.
How can you optimize performance in Compose?
Optimize performance by minimizing unnecessary recomposition, deferring expensive calculations, and using stable data types as parameters.
How can you avoid re-executing expensive calculations in Compose?
Use remember to avoid re-executing expensive calculations during recompositions.
What data types should be used as parameters in Compose to prevent unnecessary recomposition?
Use immutable or stable data types as parameters of a composable to prevent unnecessary recomposition.
How can you efficiently handle large datasets in Compose?
Use lazy composables like LazyColumn and LazyRow for large datasets.
Why should you specify a unique key for each item in a lazy composable?
Specifying a unique key helps Compose track and update the items efficiently, improving performance during recomposition.
How can you handle frequently changing state in Compose?
Use lambda parameters for accessing frequently changing state to change the state read scope.
How can lambda modifiers improve Compose performance?
Use lambda modifiers instead of regular modifiers to defer state reads to the layout phase or draw phase, optimizing performance.
What is the purpose of key in Lazy Composables?
key is used to identify list items and reduce unnecessary recompositions for lazy composables.
What happens if you don’t use key in a Lazy Composable when the order of a dataset changes?
Without a key, Compose assumes that all items have changed, causing it to recompose each item, even if only the order has changed but the items remain the same.
How does providing a key in Lazy Composables optimize recompositions?
Providing a key helps Compose recognize unchanged items and avoid recomposing them, improving performance.
Why should you wrap state read in a lambda in Compose?
Wrapping the state read in a lambda prevents unnecessary recompositions of unrelated composables, which would otherwise be recomposed when the state changes.
What happens when the state changes without wrapping it in a lambda?
When the state changes, composables that access the state, as well as other unrelated composables at the same scope level, are recomposed.
When should you wrap state reads in a lambda?
Only wrap frequently changing states because creating a lambda has some extra cost.
Why should you use lambda modifiers instead of regular modifiers in Compose?
Lambda modifiers are called only in the layout or draw phase, allowing for more efficient state handling.
How do lambda modifiers help with state changes in Compose?
Using lambda modifiers defers the state read to the layout or draw phase, so the entire composition gets skipped even if the state changes.
What is the best practice for state reads in Compose?
Try to move the state read to the lowest possible phase to optimize performance.
What happens during the Composition phase in Compose?
The Composition phase describes the UI by running composable functions.
What happens during the Layout phase in Compose?
The Layout phase measures the size of UI elements and determines their placements. Layout composables and the offset lambda modifier are called in this phase.
What happens during the Drawing phase in Compose?
The Drawing phase renders the UI on the screen. Canvas composables and the drawBehind lambda modifier are called in this phase.
How does the Layout phase work in Compose?
Each composable measures the size of child composables (if any) and decides its own size based on these measurements, but within the constraints provided by its parent.
What happens after the size calculation in the Layout phase?
After the calculation, the composable places all its child composables inside it.
What is Unidirectional data flow in Compose?
Unidirectional data flow is the principle where state flows down from the parent to the child, and events flow up from the child to the parent, ensuring UI consistency and making it easier to debug.
Why is Unidirectional data flow important in Compose?
It simplifies state management and makes the UI more predictable, as the flow of data and events follows a clear, one-way path.
What is Unidirectional Flow?
Unidirectional Flow is a principle where data flows in a single direction, from state to UI and actions back to state, ensuring that state changes and user interactions follow a single path.
How does Unidirectional Flow make state management easier?
It makes state management more predictable by ensuring that the flow of data and actions follows a clear, single path.
What is the @Composable annotation used for?
The @Composable annotation is used to define a composable function in Jetpack Compose.
Does the @Composable annotation trigger an annotation processor?
No, the @Composable annotation doesn’t trigger an annotation processor. It marks the function to be processed by the Compose compiler.
Can a composable function marked with @Composable be called from other composable functions?
Yes, a composable function marked with @Composable can be called from other composable functions.
What is a Composer in Jetpack Compose?
A Composer is used to manage the UI state and the recomposition process in Jetpack Compose.
How does a Composer track the UI?
It keeps track of the order of composables to map the UI tree, which is stored as a table.
What happens when the state changes in the Composer?
When the state changes, the Composer compares the differences between the new and old state and only re-executes the affected parts of the UI to update it.
