1<!DOCTYPE html><html lang="en"><head><title>Debounce search in react</title><meta name="description" content="Learn how to implement debounce search in react application to improve the user experience and reduce the workload on your system. Discover the benefits of debounce and how it can help you create more responsive and efficient search functionality."/><meta name="author" content="Huzaima"/><meta name="robots" content="index, follow"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta charSet="UTF-8"/><meta property="og:title" content="Debounce search in react"/><meta property="og:url" content="https://huzaima.io/blog/debounce-search-react"/><meta property="og:description" content="Learn how to implement debounce search in react application to improve the user experience and reduce the workload on your system. Discover the benefits of debounce and how it can help you create more responsive and efficient search functionality."/><meta property="og:image" content="https://huzaima.io/debounce-search-react.webp"/><meta property="og:image:alt" content="Debounce search in react"/><meta property="og:type" content="article"/><meta property="og:site_name" content="Huzaima"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@HuzaimaKhan"/><meta name="twitter:title" content="Debounce search in react"/><meta name="twitter:description" content="Learn how to implement debounce search in react application to improve the user experience and reduce the workload on your system. Discover the benefits of debounce and how it can help you create more responsive and efficient search functionality."/><meta name="twitter:image" content="https://huzaima.io/debounce-search-react.webp"/><link rel="canonical" href="https://huzaima.io/blog/debounce-search-react"/><link rel="preload" as="image" imageSrcSet="/github.svg 1x, /github.svg 2x"/><link rel="preload" as="image" imageSrcSet="/twitter.svg 1x, /twitter.svg 2x"/><link rel="preload" as="image" imageSrcSet="/linkedin.svg 1x, /linkedin.svg 2x"/><link rel="preload" as="image" imageSrcSet="/instagram.svg 1x, /instagram.svg 2x"/><link rel="preload" as="image" imageSrcSet="/facebook.svg 1x, /facebook.svg 2x"/><meta name="next-head-count" content="24"/><style id="stitches">--sxs{--sxs:1 k-sAcdW}@media{@keyframes k-sAcdW{0%{opacity:0}50%{opacity:1}100%{opacity:0}}}--sxs{--sxs:2 c-eTeZOK c-kWTPcJ c-dVlPBt c-bStdfw c-gFjGeo c-kZgTob c-kgpBnQ c-cqXnUm c-dGZnxe c-flKjmn c-kBtlap c-kawhb c-gPjxah c-davjuc c-fixGjY c-PJLV}@media{.c-eTeZOK{display:flex;flex-direction:row;justify-content:space-between;max-width:min(75ch, 100%);margin:0px auto;padding:16px 0px;border-bottom:1px solid var(--border-light)}@media (min-width: min(75ch, 100%)){.c-eTeZOK{margin:16px auto 0px auto}}.c-kWTPcJ{display:flex;align-items:center;font-weight:bold;font-size:2rem;font-family:monospace;color:var(--secondary-color)}.c-dVlPBt{margin-right:5px;-webkit-user-select:none;user-select:none}.c-bStdfw{-webkit-user-select:none;user-select:none}.c-gFjGeo{display:inline-block;width:10px;height:1.2rem;background:var(--secondary-color);margin-left:5px;animation:k-sAcdW 1s ease infinite;-webkit-user-select:none;user-select:none}.c-kZgTob{margin:0px 8px;color:var(--text-color-gray)}.c-kZgTob:hover{color:var(--text-color)}.c-kgpBnQ{display:grid;grid-template-columns:1fr min(75ch, 100%) 1fr}.c-kgpBnQ > *{grid-column:2}.c-cqXnUm{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:24px 0px}.c-dGZnxe{color:var(--text-color-gray);text-align:center}.c-flKjmn{display:flex;flex-direction:row;align-items:center;padding:8px 0px;border-top:1px solid var(--border-light)}.c-kBtlap{color:var(--text-color-gray);min-width:12ch}.c-kawhb{color:var(--text-color)}.c-gPjxah{margin:0}.c-davjuc{color:var(--text-color-gray);border-top:1px solid var(--border-light);margin-top:50px;padding:8px 0px}.c-fixGjY{display:flex;flex-direction:column}}--sxs{--sxs:6 c-PJLV-ifgNTsQ-css c-PJLV-iYVaQH-css c-PJLV-ifDitzp-css c-PJLV-ifPybed-css c-PJLV-ilgrLVX-css c-PJLV-iiQeomE-css c-PJLV-igjdJOs-css}@media{.c-PJLV-ifgNTsQ-css{margin-top:24px}.c-PJLV-iYVaQH-css{color:var(--text-color-gray);display:inline;margin-top:8px;padding:6px 12px;text-transform:lowercase}.c-PJLV-iYVaQH-css:hover{background-color:#d6fcfb0a;border-radius:8px}.c-PJLV-ifDitzp-css{font-size:2.5rem}@media (max-width: 425px){.c-PJLV-ifDitzp-css{font-size:2rem}}.c-PJLV-ifPybed-css{display:flex;justify-content:center;align-items:center;flex-direction:row}@media (max-width: 425px){.c-PJLV-ifPybed-css{flex-direction:column}}.c-PJLV-ilgrLVX-css{color:var(--text-color-gray)}.c-PJLV-iiQeomE-css{margin:0 1ch;color:var(--text-color-gray)}@media (max-width: 425px){.c-PJLV-iiQeomE-css{display:none}}.c-PJLV-igjdJOs-css{text-align:center}}</style><link rel="preload" href="/_next/static/css/d4aa08a3b0fd5375.css" as="style"/><link rel="stylesheet" href="/_next/static/css/d4aa08a3b0fd5375.css" data-n-g=""/><noscript data-n-css=""></noscript>
1<script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script>
1<script src="/_next/static/chunks/webpack-9b312e20a4e32339.js" defer=""></script>
1<script src="/_next/static/chunks/framework-0ba0ddd33199226d.js" defer=""></script>
1<script src="/_next/static/chunks/main-f2dbe6e94a613e65.js" defer=""></script>
1<script src="/_next/static/chunks/pages/_app-493f7b281351b3be.js" defer=""></script>
1<script src="/_next/static/chunks/311-1de708905c3a90d2.js" defer=""></script>
1<script src="/_next/static/chunks/134-15a313498472af60.js" defer=""></script>
1<script src="/_next/static/chunks/pages/blog/%5Bslug%5D-de4f3a774dfa0e53.js" defer=""></script>
1<script src="/_next/static/S7kdYiPDwcniosBKDbE5-/_buildManifest.js" defer=""></script>
1<script src="/_next/static/S7kdYiPDwcniosBKDbE5-/_ssgManifest.js" defer=""></script>
1</head><body><div id="__next"><div><header class="c-eTeZOK"><span class="c-kWTPcJ"><span class="c-dVlPBt">></span><a href="/"><span class="c-bStdfw">Huzaima</span></a><span class="c-gFjGeo"></span></span><nav><a href="/" class="c-kZgTob">home</a><a target="_blank" rel="noreferrer" href="/CV_Huzaima.pdf" class="c-kZgTob">resume</a></nav></header><main class="c-kgpBnQ"><article class="c-fixGjY"><div class="c-PJLV c-PJLV-ifgNTsQ-css"><a title="home" href="/" class="c-PJLV c-PJLV-iYVaQH-css">â  <!-- -->home</a></div><h1 class="c-PJLV c-PJLV-ifDitzp-css">Debounce search in react</h1><div><div class="c-PJLV c-PJLV-ifPybed-css"><span class="c-PJLV c-PJLV-ilgrLVX-css">Huzaima Khan</span><span class="c-PJLV c-PJLV-iiQeomE-css">â¢</span><span class="c-PJLV c-PJLV-ilgrLVX-css">Jan 17, 2023</span><span class="c-PJLV c-PJLV-iiQeomE-css">â¢</span><span class="c-PJLV c-PJLV-ilgrLVX-css">3 min read</span></div></div><p>Debounce search in react is a useful technique for improving the performance of search functionality. Searching is an essential feature for many applications, but it can put a lot of strain on a system if not implemented properly. In this article, we will explore how debounce search can improve the performance and user experience of your React app. Debouncing is a technique that limits the rate at which a search function is executed, allowing the system to process user input in a more efficient and responsive manner. By the end of this article, you will have a clear understanding of debounce search and know how to implement it in your React application.</p> 2<h2>What is debounce?</h2> 3<p>Debounce is a technique used to improve the performance of a system by limiting the rate at which a particular function or event is executed. It works by delaying the execution of a function or event until a certain amount of time has passed without that function or event being triggered again. This can prevent excessive or unnecessary processing and reduce the workload on the system. Debouncing is commonly used in situations where a user is interacting with a system, such as when typing on a keyboard or clicking on a button, to ensure that the system only responds to the user's actions in a reasonable and smooth manner.</p> 4<h2>How to implement debounce?</h2> 5<p>To implement debounce in React, you can use the <code>lodash</code> library, which provides a convenient <code>debounce</code> function. First, you will need to install <code>lodash</code> by running the following command:</p> 6<div></div> 7<p>Once <code>lodash</code> is installed, you can import the <code>debounce</code> function in your React component like this:</p> 8<div></div> 9<p>Next, you will need to define a <code>handleSearch</code> function responsible for executing the search. This function should take the search query as an argument and use it to fetch the search results from your API or database.</p> 10<div></div> 11<p>Now, you can use the <code>debounce</code> function to wrap the <code>handleSearch</code> function and specify the time to wait before executing it. It's also a good idea to use <code>useCallback</code> so the function is memoized. And since <code>handleSearch</code> is defined outside the component, we don't need to add it to the <a href="/blog/optimizing-useeffect-in-react">dependency array</a>. For example, the following code will wait for 500 milliseconds before executing the <code>handleSearch</code> function:</p> 12<div></div> 13<p>Finally, you can use the <code>debouncedHandleSearch</code> function in your React component's render method. For example, you could use an input element with an <code>onChange</code> event handler that calls the <code>debouncedHandleSearch</code> function like this:</p> 14<div></div> 15<p>This will create a debounced search that executes only after the user has stopped typing for 500 milliseconds. You can adjust this time interval to suit your specific needs.</p> 16<p>Debounce is a valuable technique for improving search performance in React applications. By delaying the execution of the search until the user has finished typing, you can improve the performance of your application and provide a better user experience.</p></article><div class="c-PJLV c-PJLV-igjdJOs-css">Find me here:<br/>
16<a target="_blank" rel="noopener noreferrer" href="https://github.com/huzaima"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:25px;height:25px;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><img alt="GitHub" title="GitHub" aria-label="GitHub" srcSet="/github.svg 1x, /github.svg 2x" src="/github.svg" decoding="async" data-nimg="fixed" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/></span></a>  <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/HuzaimaKhan"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:25px;height:25px;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><img alt="Twitter" title="Twitter" aria-label="Twitter" srcSet="/twitter.svg 1x, /twitter.svg 2x" src="/twitter.svg" decoding="async" data-nimg="fixed" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/></span></a>  <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/huzaimakhan/"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:25px;height:25px;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><img alt="LinkedIn" title="LinkedIn" aria-label="LinkedIn" srcSet="/linkedin.svg 1x, /linkedin.svg 2x" src="/linkedin.svg" decoding="async" data-nimg="fixed" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/></span></a>  <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/khanhuzaima/"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:25px;height:25px;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><img alt="Instagram" title="Instagram" aria-label="Instagram" srcSet="/instagram.svg 1x, /instagram.svg 2x" src="/instagram.svg" decoding="async" data-nimg="fixed" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/></span></a>  <a target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/huzaima.n.khan/"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:25px;height:25px;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><img alt="Facebook" title="Facebook" aria-label="Facebook" srcSet="/facebook.svg 1x, /facebook.svg 2x" src="/facebook.svg" decoding="async" data-nimg="fixed" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/></span></a></div><div class="c-PJLV c-PJLV-ifgNTsQ-css"><a title="Back to home" href="/" class="c-PJLV c-PJLV-iYVaQH-css">â  <!-- -->Back to home</a></div><p class="c-davjuc">All Rights Reserved © Huzaima Khan <!-- -->2023</p></main></div></div>
16<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"mdxSource":"var Component=(()=\u003e{var h=Object.create;var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var c=t=\u003ei(t,\"__esModule\",{value:!0});var m=(t,a)=\u003e()=\u003e(a||t((a={exports:{}}).exports,a),a.exports),f=(t,a)=\u003e{c(t);for(var o in a)i(t,o,{get:a[o],enumerable:!0})},y=(t,a,o)=\u003e{if(a\u0026\u0026typeof a==\"object\"||typeof a==\"function\")for(let n of l(a))!p.call(t,n)\u0026\u0026n!==\"default\"\u0026\u0026i(t,n,{get:()=\u003ea[n],enumerable:!(o=d(a,n))||o.enumerable});return t},b=t=\u003ey(c(i(t!=null?h(u(t)):{},\"default\",t\u0026\u0026t.__esModule\u0026\u0026\"default\"in t?{get:()=\u003et.default,enumerable:!0}:{value:t,enumerable:!0})),t);var s=m((k,r)=\u003e{r.exports=_jsx_runtime});var v={};f(v,{default:()=\u003ex,frontmatter:()=\u003eg});var e=b(s()),g={title:\"Debounce search in react\",publishedAt:\"2023-01-17\",lastUpdatedAt:\"2023-01-17\",author:\"Huzaima Khan\",metaDescription:\"Learn how to implement debounce search in react application to improve the user experience and reduce the workload on your system. Discover the benefits of debounce and how it can help you create more responsive and efficient search functionality.\",imagePath:\"/debounce-search-react.webp\",isPublished:!0};function w(t={}){let{wrapper:a}=t.components||{};return a?(0,e.jsx)(a,Object.assign({},t,{children:(0,e.jsx)(o,{})})):o();function o(){let n=Object.assign({p:\"p\",h2:\"h2\",code:\"code\",pre:\"pre\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.p,{children:\"Debounce search in react is a useful technique for improving the performance of search functionality. Searching is an essential feature for many applications, but it can put a lot of strain on a system if not implemented properly. In this article, we will explore how debounce search can improve the performance and user experience of your React app. Debouncing is a technique that limits the rate at which a search function is executed, allowing the system to process user input in a more efficient and responsive manner. By the end of this article, you will have a clear understanding of debounce search and know how to implement it in your React application.\"}),`\n`,(0,e.jsx)(n.h2,{children:\"What is debounce?\"}),`\n`,(0,e.jsx)(n.p,{children:\"Debounce is a technique used to improve the performance of a system by limiting the rate at which a particular function or event is executed. It works by delaying the execution of a function or event until a certain amount of time has passed without that function or event being triggered again. This can prevent excessive or unnecessary processing and reduce the workload on the system. Debouncing is commonly used in situations where a user is interacting with a system, such as when typing on a keyboard or clicking on a button, to ensure that the system only responds to the user's actions in a reasonable and smooth manner.\"}),`\n`,(0,e.jsx)(n.h2,{children:\"How to implement debounce?\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"To implement debounce in React, you can use the \",(0,e.jsx)(n.code,{children:\"lodash\"}),\" library, which provides a convenient \",(0,e.jsx)(n.code,{children:\"debounce\"}),\" function. First, you will need to install \",(0,e.jsx)(n.code,{children:\"lodash\"}),\" by running the following command:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`npm install lodash\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Once \",(0,e.jsx)(n.code,{children:\"lodash\"}),\" is installed, you can import the \",(0,e.jsx)(n.code,{children:\"debounce\"}),\" function in your React component like this:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import debounce from \"lodash/debounce\";\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Next, you will need to define a \",(0,e.jsx)(n.code,{children:\"handleSearch\"}),\" function responsible for executing the search. This function should take the search query as an argument and use it to fetch the search results from your API or database.\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function handleSearch(query) {\n // fetch search results from API or database\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Now, you can use the \",(0,e.jsx)(n.code,{children:\"debounce\"}),\" function to wrap the \",(0,e.jsx)(n.code,{children:\"handleSearch\"}),\" function and specify the time to wait before executing it. It's also a good idea to use \",(0,e.jsx)(n.code,{children:\"useCallback\"}),\" so the function is memoized. And since \",(0,e.jsx)(n.code,{children:\"handleSearch\"}),\" is defined outside the component, we don't need to add it to the \",(0,e.jsx)(n.a,{href:\"/blog/optimizing-useeffect-in-react\",children:\"depen
16dency array\"}),\". For example, the following code will wait for 500 milliseconds before executing the \",(0,e.jsx)(n.code,{children:\"handleSearch\"}),\" function:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`const debouncedHandleSearch = useCallback(debounce(handleSearch, timeout), []);\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Finally, you can use the \",(0,e.jsx)(n.code,{children:\"debouncedHandleSearch\"}),\" function in your React component's render method. For example, you could use an input element with an \",(0,e.jsx)(n.code,{children:\"onChange\"}),\" event handler that calls the \",(0,e.jsx)(n.code,{children:\"debouncedHandleSearch\"}),\" function like this:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`render() {\n return (\n \u003cinput\n type=\"text\"\n onChange={(e) =\u003e debouncedHandleSearch(e.target.value)}\n /\u003e\n );\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"This will create a debounced search that executes only after the user has stopped typing for 500 milliseconds. You can adjust this time interval to suit your specific needs.\"}),`\n`,(0,e.jsx)(n.p,{children:\"Debounce is a valuable technique for improving search performance in React applications. By delaying the execution of the search until the user has finished typing, you can improve the performance of your application and provide a better user experience.\"})]})}}var x=w;return v;})();\n;return Component;","frontMatter":{"slug":"debounce-search-react","readingTime":"3 min read","words":591,"title":"Debounce search in react","publishedAt":"2023-01-17","lastUpdatedAt":"2023-01-17","author":"Huzaima Khan","metaDescription":"Learn how to implement debounce search in react application to improve the user experience and reduce the workload on your system. Discover the benefits of debounce and how it can help you create more responsive and efficient search functionality.","imagePath":"/debounce-search-react.webp","isPublished":true}},"__N_SSG":true},"page":"/blog/[slug]","query":{"slug":"debounce-search-react"},"buildId":"S7kdYiPDwcniosBKDbE5-","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
16</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.