Jetpack Compose display value from lambda

Question

I basically have a Composable function with a lambda returning a value which a text composable is supposed to display.


data class CustomUiState(
    val lookupList: HashMap<UUID, MutableList<String>> = HashMap()
)

class CustomViewModel(
): ViewModel() {
    private val _uiState: MutableStateFlow(CustomUiState())
    val uiState: StateFlow<CustomUiState> = _uiState.asStateFlow()

    fun getValue(index: Int) {
        // complex lookup with lookupList
        return ...
    }

    fun updateValue(i: Int, s: String) {
        _uiState.update { state -> 
            state.copy(
                // Update lookupList with new value
                lookupList = ...
            )
        }
    }
}

@Composable
fun Screen(viewModel: CustomViewModel) {

    Widget(
        value = { viewModel.getValue(it) },
        onValueChanged = { i, s viewModel.updateValue(i, s) }
    )
}

@Composable
fun Widget(
    value: (Int) -> String,
    onValueChanged: (Int, String) -> Unit
) {

    LazyRow() {
        items(4) {
            // This does not work
            // Because Compose do not recompose when value(it) changes
            Text(
                text = value(it),
                //lots of other configurations
                ...
            )
        }
    }
}

I have tried Googling but with no luck. What do I need to change to get this to work?

Adding text just because StackOverflow didn't let me post with to little text in the question.

Okay, it seems compose does not like the `MutableList` as it works now when I changed it to `List` — OscarCreator, Aug 17 '23 at 18:48

Abdullah Javed · Answer 1 · 2023-08-17T17:25:49.640

Change your code this way and see if it recomposes on value change.

class CustomViewModel(
    ): ViewModel() {
        private val _uiState: MutableStateFlow(CustomUiState())
        val uiState: StateFlow<CustomUiState> = _uiState.asStateFlow()

        init {
            getValue(StartingIndexHere)
        }
        fun getValue(index: Int) {
            // complex lookup with lookupList
            //update here _uiState here
            return ...
        }

        fun updateValue(i: Int, s: String) {
            _uiState.update { state ->
                state.copy(
                    // Update lookupList with new value
                    lookupList = ...
                )
            }
        }
    }

    @Composable
    fun Screen(viewModel: CustomViewModel) {

        val uiStateValue = viewModel.uiState.collectAsState()

        Widget(
            value = { uiStateValue.value },
            onValueChanged = { i, s viewModel.updateValue(i, s) }
        )
    }

    @Composable
    fun Widget(
        value: (Int) -> String,
        onValueChanged: (Int, String) -> Unit
    ) {

        LazyRow() {
            items(4) {
                // This does not work
                // Because Compose do not recompose when value(it) changes
                var textValue by remember(value(it)) {
                    mutableStateOf(value(it))
                }
                Text(
                    text = textValue,
                    //lots of other configurations
                    ...
                )
            }
        }
    }

Made more changes. Give it a try. Else I need to look up your code. — Abdullah Javed, Aug 17 '23 at 17:26
This does not look like the original code. Specifically `uiStateValue.value` should be a function with parameters just like my example. + it does not work still. The uiState is updated but the row is not recomposed by some reason. — OscarCreator, Aug 17 '23 at 18:33

Jetpack Compose display value from lambda

1 Answers1