v0.0.0v0.0.0
Source ↗Source ↗ (opens in a new tab)
GitHubGitHub (opens in a new tab)
  • Introduction
    • Installation
    • Usage
  • Components
    • Cascading Select
    • Cascading Select End-to-end 🔥
    • Checkbox
    • Color Picker
    • Date 🔥
    • Dynamic Fields 🔥
    • File
    • Input 🤖
    • Live Search
    • Multiple Checkboxes
    • Multiple Select 🔥
    • Native Select
    • Number Input
    • Radio
    • Range Slider
    • Search Bar
    • Select 🔥
    • Switch
    • Tag Input
    • Textarea 🤖
    • Accordion
    • Back To Top
    • Chatbox 🔥🤖
    • Digital Clock
    • Event Calendar 🔥
    • Event Calendar Timeline 🔥
    • Modal Dialog 🔥
    • Pagination
    • Show More Less
    • Stepper
    • Table 🔥
    • Tabs
    • Toast
    • Tooltip
    • Tree 🔥
    • Dropdown Menu
    • Multilevel Dropdown Menu
    • DragDrop List 🔥
    • Horizontal Scroll Content
    • Mode Switch
    • Refresher
    • Custom Scrollbar
    • Scroll Reveal
    • Masonry Layout
    • Root Portal
    • Splitter Panel
    • useKeyPress
    • useThrottle
    • useDebounce
    • useComId
    • useInterval
    • useWindowScroll
    • useAutosizeTextArea
    • useClickOutside
    • useDraggable
    • useBoundedDrag
    • useStreamController

On This Page

  • Usage
Question? Give us feedback → (opens in a new tab)

useDebounce

Delay the execution of function or state update.

Usage

import React, { useState } from "react";
import useDebounce from 'funda-ui/Utils/useDebounce';
 
const App = () => {
    const [count, setCount] = useState(0);
    const handleClick = useDebounce(() => setCount(count + 1), 500, [count]);
 
    return (
        <div className="app">
            <button onClick={handleClick}>click</button>
            <p>click {count} time</p>
        </div>
    );
};
Installation

©2024 Funda UI