--- title: React Custom Hook: useDebounce | daily.dev description: The useDebounce hook leverages the useTimeout hook internally to delay the execution of a callback function until a specified delay has passed. The hook takes... canonical: https://daily.dev/posts/react-custom-hook-usedebounce-atwqbkmz6 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: React Custom Hook: useDebounce | daily.dev og:description: The useDebounce hook leverages the useTimeout hook internally to delay the execution of a callback function until a specified delay has passed. The hook takes... og:url: https://daily.dev/posts/react-custom-hook-usedebounce-atwqbkmz6 og:image: https://api.daily.dev/og/posts/atWqBkmz6.png og:image:alt: React Custom Hook: useDebounce og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # React Custom Hook: useDebounce **[habr](https://daily.dev/sources/habr)** · 2 min read · 37 upvotes · 0 comments ## Summary The useDebounce hook leverages the useTimeout hook internally to delay the execution of a callback function until a specified delay has passed. The hook takes care of managing the timeout and clears it when necessary, ensuring that the callback is only triggered after the specified delay and with the latest dependencies. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- Tags: [#react](https://daily.dev/tags/react), [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#typescript](https://daily.dev/tags/typescript), [#react-native](https://daily.dev/tags/react-native), [#frontend](https://daily.dev/tags/frontend), [#react-hooks](https://daily.dev/tags/react-hooks) [View this post on daily.dev](https://daily.dev/posts/react-custom-hook-usedebounce-atwqbkmz6) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"React Custom Hook: useDebounce","url":"https://daily.dev/posts/react-custom-hook-usedebounce-atwqbkmz6","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/react-custom-hook-usedebounce-atwqbkmz6"},"datePublished":"2023-08-13T07:10:44.476Z","dateModified":"2023-08-13T07:10:33.280Z","description":"The useDebounce hook leverages the useTimeout hook internally to delay the execution of a callback function until a specified delay has passed. The hook takes...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/58a9f0e8eba9e503ad9b66496fc94213?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/58a9f0e8eba9e503ad9b66496fc94213?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"habr","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"habr","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/habr","url":"https://daily.dev/sources/habr"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/react-custom-hook-usedebounce-atwqbkmz6","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":37},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,webdev,javascript,typescript,react-native,frontend,react-hooks","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"habr","item":"https://daily.dev/sources/habr"},{"@type":"ListItem","position":3,"name":"React Custom Hook: useDebounce"}]} ```