Trying to show a list of values which are received...

# react

[Sourabh Rawat]

Trying to show a list of values which are received by rsocket client, but its not working at all.

val App = FC<Props> {
        val (responses, setResponses) = useState<List<String>>(emptyList())

        useEffectOnce {
            scope.launch {
                stream.collect { payload ->
                    val response = payload.data.readText()
                    println("Prev: $responses, Got $response")
                    setResponses(responses + response)
                }
            }
        }

        div {
            div {
                +"Total number of response = ${responses.size}"
            }

            for (response in responses) {
                div {
                    key = response
                    +response
                }
            }
        }
    }

Shows -

Total number of response = 1
423

The total number stays at 1 and the second lines updates 1 to 2 to 3 etc

[turansky]

setResponses { prev -> prev + response }

?

cc @Sergei Grishchenko

[Sourabh Rawat]

that worked but i don't understand why

[turansky]

Because state in react is asynchronous

[Sourabh Rawat]

I see. How can make it work if I have

var responses by useState<List<String>>(emptyList())

I tried

responses = responses + response

but it didn't work 😕

[turansky]

That is why we have destructuring for setter and getter

[turansky]

If your new state depends on previous - you can use destructuring with extended setter (your case)

[turansky]

Base:

// for complex cases
val (count, setCount) = useState(0)

Short - with Kotlin sugar:

// for simple cases
var count by useState(0)

[Sourabh Rawat]

Aha. I see. So in useEffect, the value of responses is always the emptyList(), in other words, it doesn't see the updated values?

[turansky]

Yes, it’s like async state works

[Sourabh Rawat]

Got it. Thanks a lot for the help!