Small doubt about recomposition, snippet in the :t...

# compose

[Marco Pierucci]

Small doubt about recomposition, snippet in the 🧵

[Marco Pierucci]

data class SearchState(
    val query: String = "",
    val drinks: List<Drink> = emptyList()
)


@Composable
fun SearchScreen(store: SearchStore) {

    val state = store.state.collectAsState().value
    val drinks = state.drinks
    Column {
        SearchToolbar(
            query = state.query,
            onQueryValueChanged = { querySlice ->
                store.dispatch(SearchAction.AppendSearchQuery(querySlice))
            },
            onSearch = { searchQuery ->
                store.dispatch(SearchAction.Search(searchQuery))
            })

        if (drinks.isEmpty()) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center,
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight()
            ) {
                Log.e("Recomposition ", "Column composable called")
                Text(
                    text = "Your  query yield  no results",
                    color = MaterialTheme.colors.onBackground
                )
            }
        } else {
            LazyColumn {
                items(drinks, { drink: Drink -> drink.id }) { drink ->
                    Text(drink.name, color = MaterialTheme.colors.onBackground)
                }
            }
        }
    }
}

[Marco Pierucci]

onQueryValueChanged cause the store to re emit on the flow a new state where just query changes. This happens in every key entered in a TextField within SearchToolbar

[Marco Pierucci]

Based on what I’ve read on https://developer.android.com/jetpack/compose/lifecycle#lifecycle-overview

as long as I dont perform a search de Column inside

if (drinks.isEmpty()) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center,
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight()
            ) {
                Log.e("Recomposition ", "Column composable called")
                Text(
                    text = "Your  query yield  no results",
                    color = MaterialTheme.colors.onBackground
                )
            }
        }

should not be recomposed as there are no parameter changes, nevertheless with every input I can see my Log input

[Marco Pierucci]

shouldn´t the call be skipped?

[Adam Powell]

It's not a skippable call as Column is `inline`d. You can verify this by ctrl+clicking into the definition of Column and the other composables it calls.

[Marco Pierucci]

Ohh that makes perfect sense thanks! I moved to its own composable and now works as expected

[Marco Pierucci]

thanks again

[Adam Powell]

keep in mind that skipping is a performance optimization, not a correctness-of-result guarantee. It should never create a result correctness bug if a composable call either does or doesn't skip.

[Marco Pierucci]

Mm not sure if I follow this one. Am working on a redux-like arch and as a result am planning of emitting similar states often, hence looking for support of partial updates. Am aware this could be premature optimization but how would be an issue to isolate that code into its own composable?

[Adam Powell]

I'm referring to the performance benefits of skipping and restarting separate from potential correctness implications of uncontrolled side effects that may exist and cause one to ask detailed questions about skipping behaviors. 🙂 If you've measured that this makes a performance difference for your code, by all means factor it into its own composable. That's what it's there for.

[Marco Pierucci]

ah I see, got it

[Marco Pierucci]

👍