Composeの入力要素

Question

実現したいこと

以下のすべてを解決、またはバランスよく実装したい。

1. 入力要素が3つ以上あるとき、状態管理用の変数が2重、3重、4重管理になることを防ぎたい(あるいはグループ化して管理したい)。
2. 入力要素のかくつきをなくしたい(あるいは抑えたい)

前提

KMP(Kotlin Multiplatform)を使用しています。
まずはWindows(デスクトップ向け)のUI要素を作成しているのですが、Android向けのjetpack composeの際に遭遇した問題に再び差し当たっています。
その際はxmlで回避できましたが、今回はUIフレームワークがCompose一択で困っています。

質問の内容を詳しく書いてください。

1の問題について
愚直にやるのであれば、以下のような状態になるかと思います。

@Composable
fun TestScreen() {
    val viewModel = remember { MyViewModel() }

    val nameState by viewModel.nameFlow.collectAsState()
    val emailState by viewModel.emailFlow.collectAsState()

    Column {
        Text(text = nameState)
        TextField(
            value = nameState,
            onValueChange = { newValue -> 
                viewModel.updateName(newValue) 
            }
        )

        TextField(
            value = emailState,
            onValueChange = { newValue -> 
                viewModel.updateEmail(newValue) 
            }
        )
    }
}

class MyViewModel {
    private val _nameFlow = MutableStateFlow("")
    val nameFlow: StateFlow<String> = _nameFlow.asStateFlow()

    private val _emailFlow = MutableStateFlow("")
    val emailFlow: StateFlow<String> = _emailFlow.asStateFlow()

    fun updateName(newName: String) {
        _nameFlow.value = newName
    }

    fun updateEmail(newEmail: String) {
        _emailFlow.value = newEmail
    }
}

この状態ですと、

    private val _nameFlow = MutableStateFlow("")
    val nameFlow: StateFlow<String> = _nameFlow.asStateFlow()

の様な部分に関してTextFieldが増えるたびにこの記述が1つ増え、さらには@Composable内での変数も追加しなければならず、今後、ロジックが増えるごとにそのロジックにも同じ記述が増えることを懸念しておりこれを可能な限り回避または共通化したいです。

2の問題について。
1の問題を回避するプラス、入力フォームのグループ化の意味合いを強めるためにDataClassを追加しMutableStateFlowでラップするとすると以下のようなコードになるかと思います。

@Composable
fun TestScreen() {
    val viewModel = remember { MyViewModel() }


    val uiState by viewModel.uiState.collectAsState()

    // remember or derivedStateOf
    val nameState = remember(uiState) { uiState.name }
    val emailState = remember(uiState) {  uiState.email }

    Column {
        Text(text = nameState)
        TextField(
            value = nameState,
            onValueChange = { newValue ->
                viewModel.updateName (newValue)
            }
        )

        TextField(
            value = emailState,
            onValueChange = { newValue ->
                viewModel.updateEmail (newValue)
            }
        )
    }
}

data class TestForm(
    val name: String,
    val email: String,
)

class MyViewModel {
    private val _uiState = MutableStateFlow(TestForm(name = "", email = ""))
    val uiState: StateFlow<TestForm> = _uiState.asStateFlow()

    fun updateName(newName: String) {
        _uiState.value = _uiState.value.copy(name = newName)
    }

    fun updateEmail(newEmail: String) {
        _uiState.value = _uiState.value.copy(email = newEmail)
    }
}

しかしこの方法ですと、composeが再コンポーズされる、またはその判定の計算のせいか操作のかくつきが若干増えることがネックになります。

発生している問題

以上の状態をどのように回避すればよいのでしょうか？
TextFieldがたくさんあるという状態をそもそも想定していなかったりするのでしょうか。
よろしくお願いいたします。

調べた内容

Stateはcomposable関数内でしか意味をなさないようで、viewModelにコールバック関数を仕込み共通化するのは不可能でした。
多数の入力がある際のサンプルが見つかりませんでした。
compose for desktopのプラグインを導入し、実施している都合からかIDEからサンプルなどは参照できなそうでした。

再コンポーズの条件に関しては以下の内容を確認しました。
https://qiita.com/wcaokaze/items/a066ab81b69578390992

補足情報

不足があれば追記致します。
またこれらの問題に関してコミュニティなどがあれば、

Answer 1

[自己回答]
このサイトによるとFlowを使うと非同期に処理が行われるためかくつきが発生することがあるようです。
https://developer.android.com/develop/ui/compose/text/user-input?hl=ja

実際にこの方法に倣って以下のように書き換えてみると体感早くなったような気がします。
問題が出ない限りは以下の様な書き方でよさそうです。

@Composable
fun TestScreen() {
    val viewModel = remember { MyViewModel() }

    Column {
        Text(text = viewModel.uiState.name)
        TextField(
            value = viewModel.uiState.name,
            onValueChange = { newValue ->
                viewModel.updateName (newValue)
            }
        )

        TextField(
            value = viewModel.uiState.email,
            onValueChange = { newValue ->
                viewModel.updateEmail (newValue)
            }
        )


    }
}

data class TestForm(
    val name: String,
    val email: String,
)

class MyViewModel {
    var uiState by mutableStateOf(TestForm(name = "", email = ""))
        private set

    fun updateName(newName: String) {
        uiState = uiState.copy(name = newName)
    }

    fun updateEmail(newEmail: String) {
        uiState = uiState.copy(email = newEmail)
    }
}

// 最初から公式ドキュメントを当たればよかった！(いつも通り)