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,
)
}