I try to debounce some inputs. I tried the followi...

# javascript

[Hildebrandt Tobias]

I try to debounce some inputs.
I tried the following (https://dev.to/manishkc104/debounce-input-in-react-3726), filters is just a `List<String>`:

val (filters, setFilters) = useState<List<String>>(listOf())
useEffect(filters) {
    println("Now in useEffect")
    val timeoutId = setTimeout({
        println("Now in timeout function")
    }, 2000)
    clearTimeout(timeoutId)
}

"Now in useEffect" is printed, but "Now in timeout function" never shows even when I call setFilters and wait.

[turansky]

This will do required job

useEffect(filters) {
    println("Now in useEffect")
    delay(2000)
    println("Code after timeout function")
}

delay is from coroutines

[Hildebrandt Tobias]

Ah thank you, so the simple way is the right one here?
Just curious when filters is changed again while the delay(2000) is still waiting,
is the "old" useEffect then canceled?

[turansky]

In old style:

useEffectWithCleanup(filters) {
    println("Now in useEffect")
    
    val timeoutId = setTimeout({
        println("Now in timeout function")
    }, 2000)

    onCleanup {
        clearTimeout(timeoutId)
    }
}

[Hildebrandt Tobias]

Thank you

[turansky]

Most used functions already have suspend analogs with auto cleanup 😉
Like in your case

[turansky]

Examples

[Hildebrandt Tobias]

Nice, thank you for those!

[Hildebrandt Tobias]

Damn, my colleague and I are all over those new tutorials. He really wants to check out the Lazy Modules plugin.

[turansky]

Related thread