I am trying to convert values collected from a Kotlin Flow to a state variable (or whatever other Re...

# react

[Luc Girardin]

I am trying to convert values collected from a Kotlin Flow to a state variable (or whatever other React hook is appropriate to trigger update). Did maybe one of you succeeded at integrating the features of Kotlin Flows with React?!?

[Luc Girardin]

My immediate use case is to debounce events, where I think Flows would be very well suited. Or are you all using Lodash for that purpose?

[turansky]

Flow is fine, 2-3 additional common hooks required to simplify Flow usage

[Mike Dawson]

I use this at the moment:

fun <T> Flow<T>.collectAsState(
    initialState: T,
): StateInstance<T> {
    val state = useState { initialState }

    useEffect(dependencies = arrayOf(this)) {
        val coroutineScope = CoroutineScope(Dispatchers.Main + Job())

        coroutineScope.launch {
            [e-mail] {
                state.component2().invoke(it)
            }
        }

        cleanup {
            coroutineScope.cancel()
        }
    }

    return state
}

[turansky]

It doesn’t look safe 😞

[Luc Girardin]

@Mike Dawson Many thanks for the input (and sorry for the delayed reply): this do look brilliant to me and exactly what I needed. @turansky What makes you believe this is unsafe? Any tip on how to improve this piece of code?!?

[turansky]

It must be hooks

[turansky]

Otherwise it looks like you can call it optionally

[Luc Girardin]

I know I am a React rookie in comparison to you: aren’t useState and useEffect hooks?!?

[turansky]

Now we discuss hooks with following contracts:

fun useAsyncEffect(
   vararg dependencies: Any?
   block: suspend CoroutineScope.() -> Unit,
)

where it will be possible to create flows

[turansky]

And one more for “async” state

[Luc Girardin]

I am slowly starting to get it. Need to read some more on this useAsyncEffect hook. There is no such implementation for Kotlin, right?

[turansky]

Initial useAsyncEffect implementation is here

[turansky]

Released in pre.549

[Mike Dawson]

I think it is safe... I'm not sure it's the most efficient way of doing things (e.g. creating / canceling a coroutine scope each time the flow changes - but that doesn't happen very often - normally we are collecting values from the same flow).

Cleanup of the previous effect always runs before the effect runs again, so the old coroutine is always cancelled first.

Technically, this returns a read/write state instance, it might be better to return the value ready-only.

[Mike Dawson]

Having a standard useAsyncEffect is definitely nice