How fast does LaunchedEffect start its coroutine?

Question

Consider this code example:

val state = rememberLazyListState()

LaunchedEffect(Unit) {
    state.scrollToItem(20)
}

For the sake of this example, assume only 10 items fit on the screen and notice that we request to show the item with index 20.

When the screen is first composed, the LaunchedEffect is triggered. But what does that technically mean? Would the first frame show only the first item, then asynchronously the coroutine of the LaunchedEffect runs and some frames later the screen shows item 20? Or would this code directly show the item with index 20 on the first drawn frame?

For me it's not only important to have a yes/no answer, but to understand how that works.

Answer 1

The behavior of LaunchedEffect in Jetpack Compose is to start its coroutine as soon as the composable function is first composed. However, the exact timing of when the coroutine starts executing can vary depending on factors such as the composition process and the thread scheduling.

In your example, when the composable function is first composed, the LaunchedEffect is triggered. This means that the coroutine specified within the LaunchedEffect block will start executing at that point.

Now, whether the item with index 20 will be immediately visible on the first drawn frame depends on the specifics of your layout and rendering pipeline. If the composition process and rendering are fast enough, and there are no other costly operations blocking the UI thread, it's possible that the item with index 20 could be displayed on the first drawn frame. However, if there are delays in rendering or other UI operations, it's possible that the item with index 20 might not be visible until subsequent frames.

Your intuition is on point. Jetpack Compose operates on a declarative model where the UI is a function of the current state. When a composable function is first composed, the framework calculates the current state and creates the initial frame based on that state.

When Compose encounters a LaunchedEffect, it indeed starts the coroutine specified in it, but it does not wait for the coroutine to complete before continuing the composition process and rendering the current frame. This means that the effects of the coroutine, such as scrolling to item 20 in your example, will not be visible in the first drawn frame.

Instead, the coroutine will execute asynchronously in the background. Depending on the workload of the UI thread, the coroutine may complete quickly and its effects may be visible in subsequent frames, possibly in the next frame if the composition and rendering pipeline allow for it. However, there's no guarantee that the effects of the LaunchedEffect will be visible immediately after the first frame is drawn.

Under the hood, Compose manages the scheduling and execution of coroutines to ensure that UI interactions remain smooth and responsive. By starting coroutines asynchronously, Compose allows the UI thread to continue its work without waiting for potentially long-running tasks to complete. This approach helps maintain a responsive user experience even when performing background tasks triggered by LaunchedEffect or other coroutine-based constructs.