useDebounce()

The useDebounce() hook lets you debounce value changes inside your components. Use this when you want to perform a heavy operation based on state

Import

import { useDebounce } from 'react-haiku';

Usage

Real-Time Value: Debounced value:

import { useState, useEffect } from 'react'
import { useDebounce } from "react-haiku"

export const Component = () => {
    const [value, setValue] = useState('')
    const debouncedValue = useDebounce(value, 1000)

    const handleChange = (event) => setValue(event.target.value)

    // Handle Change After Debounce
    useEffect(() => {
        console.log(debouncedValue);
    }, [debouncedValue])

    return (
        <>
            <b>Real-Time Value: {value}</b>
            <b>Debounced value: {debouncedValue}</b>

            <input type="text" value={value} onChange={handleChange} />
        </>
    );
}

API

This hook accepts the following arguments:

• value - the state value that you want to debounce on changes
• timeout - the amount of time in milliseconds to wait until the debounce is triggered, 500ms by default