I have a small composable function with just one parameter:

@Composable
private fun LeftControlContainers(
    uiControl: EditorUiControl,
) {
    val controls = rememberUpdatedState(uiControl)

    val configState = remember { derivedStateOf { controls.value.controlMap[ArtifaktControls.CONFIGURATION.id] } }

    Column(
        modifier = Modifier.width(144.dp),
        verticalArrangement = Arrangement.spacedBy(Theme.spacingSystem.xxs)
    ) {
        key(configState.value, controls.value) {
            controls.value.Draw(
                uiElement = EditorUiDropDown(),
                elementId = ArtifaktControls.CONFIGURATION.id,
            )
        }
    }
}

And EditorUiControl is:

class EditorUiControl(
    val defaultControlMap: ImmutableMap<String, NewEditorElement>,
    val controlMap: ImmutableMap<String, NewEditorElement>,
    val setControlValue: (
        elementId: String,
        updatedEditorElement: NewEditorElement,
        changedValue: EditorElementValue<*>,
    ) -> Unit,
) {
    @Composable
    fun Draw(
        uiElement: EditorUiElement,
        elementId: String,
        modifier: Modifier = Modifier,
        filtrationMethod: FiltrationMethod = FiltrationMethod.SHUTDOWN,
    ) {
        uiElement.Draw(
            modifier = modifier,
            elementId = elementId,
            defaultControlMap = defaultControlMap,
            controlMap = controlMap,
            setControlValue = setControlValue,
            filtrationMethod = filtrationMethod,
        )
    }
}

However, whenever any single item changes, all composable functions like this also change, causing around 200 recompositions each time.

I tried to use remember and wrap it with a key, but the logger still indicates that it’s recomposing every time. How can I avoid this?

key(configState.value, controls.value) {
    print("recomposed")
    controls.value.Draw(
        uiElement = EditorUiDropDown(),
        elementId = ArtifaktControls.CONFIGURATION.id,
    )
}