Although this is a getter the value returned by it seems to always be the initial value in the scope...

# react

[Mihai Voicescu]

Although this is a getter the value returned by it seems to always be the initial value in the scope of the closure

var chats by useState(listOf<String>("first"))

    useEffectOnce {
        GlobalScope.launch {
            client.rtmStream().collect {
                val current = chats // always initial value
                println(current)
                chats = current + it.message
            }
        }
    }

Am I doing something wrong?

[Daniel Rampelt]

useState returns an array containing the value and a function to set the value, so the value is captured in that array and isn't actually a function to get the current value. The getter function allowing you to use by just accesses the first element in that array which is just the captured value:

inline operator fun getValue(
        thisRef: Nothing?,
        property: KProperty<*>,
    ): T =
        asDynamic()[0]

[Mihai Voicescu]

So any way of getting the current value? Or do I have to keep a separate reference in the closure?

[Daniel Rampelt]

So you wouldn't have an updated value unless the effect depends on that state and reruns when it changes. If you only want the effect to run once I think you would have to use useRef instead
https://stackoverflow.com/a/60643670

[Daniel Rampelt]

So in kotlin that would be something like this:

var chats by useState(listOf<String>("first"))
val chatsRef = useRef(chats)
chatsRef.current = chats

Then in your callback you can access chatsRef.current to get the current value

[turansky]

Also cleanup missed

[turansky]

Example

[Mihai Voicescu]

Why is the cleanup required? Seems to me like no resources are leaking, not even in the example you gave me

[Mihai Voicescu]

Ohhh, the cleanup is required because the subscription might no longer be necessary if the component is removed from the tree. Right?

[turansky]

Yes

[CLOVIS]

You can extract the cleanup part to its own hook: https://gitlab.com/clovis-ai/formulaide/-/blob/main/ui/src/main/kotlin/formulaide.ui/components/Async.kt#L20

[CLOVIS]

This way you don't have to think about suspension or cleanup every time in your code