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?!?

Flow

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

Flow

usage

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 {
            this@collectAsState.collect {
                state.component2().invoke(it)
            }
        }

        cleanup {
            coroutineScope.cancel()
        }
    }

    return state
}

It doesn’t look safe 😞

@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?!?

It must be hooks

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

Now we discuss hooks with following contracts:

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

where it will be possible to create flows

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

Initial

useAsyncEffect

implementation is here

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.