आजकल लगभग हर वेबसाइट में Search Feature होता है।

जैसे:

• Google Search
• YouTube Search
• Amazon Product Search
• User Search

लेकिन एक बड़ी समस्या यह होती है कि जब user तेजी से typing करता है, तब हर key press पर API call होने लगती है। इससे:

• Server पर ज्यादा load पड़ता है
• Website slow हो जाती है
• Unnecessary API requests बढ़ जाती हैं

इसी समस्या को solve करने के लिए हम Debouncing का उपयोग करते हैं।

Debouncing क्या होता है?

Debouncing एक performance optimization technique है।

इसमें हम API call को थोड़ी देर के लिए delay करते हैं ताकि user typing पूरी कर सके।

मतलब:

हर key press पर API call मत करो,

user typing बंद करे तब API call करो।

Debounced Search क्यों जरूरी है?

मान लीजिए user "react" search कर रहा है।

वह ऐसे type करेगा:

r
re
rea
reac
react

अगर debounce नहीं होगा, तो:

• 5 API Calls होंगी

लेकिन debounce लगाने के बाद:

• केवल 1 API Call होगी

यानी performance बेहतर होगी।

Step 1: User Typing करता है

Input field की value update होती है।

Step 2: Timer Start होता है

setTimeout() एक delay शुरू करता है।

उदाहरण:

setTimeout(() => {
  // API Call
}, 500);

यह 500ms wait करेगा।

Step 3: User दोबारा Typing करता है

अगर user फिर से type करता है तो पुराना timer cancel हो जाता है।

इसके लिए:

clearTimeout(timer);

का उपयोग करते हैं।

Step 4: API Call होती है

जब user typing बंद कर देता है तब final API call होती है।

Example: Debounced Search Input in React.js

import React, { useEffect, useState } from "react";

export default function DebouncedSearch() {
  const [searchTerm, setSearchTerm] = useState("");
  const [debouncedValue, setDebouncedValue] = useState("");

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(searchTerm);
    }, 500);

    return () => {
      clearTimeout(timer);
    };
  }, [searchTerm]);

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm} => setSearchTerm(e.target.value)}
      />

      <h3>Search Value: {debouncedValue}</h3>
    </div>
  );
}

Code को आसान भाषा में समझें

1. searchTerm State

const [searchTerm, setSearchTerm] = useState("");

यह user द्वारा typed value store करता है।

2. debouncedValue State

const [debouncedValue, setDebouncedValue] = useState("");

यह final delayed value store करता है।

3. setTimeout()

setTimeout(() => {
  setDebouncedValue(searchTerm);
}, 500);

500ms बाद value update होगी।

4. clearTimeout()

clearTimeout(timer);

अगर user फिर type करे तो पुराना timer हट जाएगा।

Debouncing के फायदे

1. API Calls कम होती हैं

Server पर unnecessary load नहीं पड़ता।

2. Performance बेहतर होती है

Application fast feel होती है।

3. Better User Experience

Search smooth और responsive लगता है।

4. Server Cost कम होती है

कम requests मतलब कम resources।

Debounce Delay कितना रखना चाहिए?

आमतौर पर:

300ms से 700ms

best माना जाता है।

Best Practices

Empty Search पर API Call मत करें

if (!searchTerm.trim()) return;

Loading State दिखाएं

Loading...

Error Handling जरूर करें

try {
} catch (error) {
}

Custom Hook बनाएं

बड़े applications में reusable custom hook बनाना बेहतर होता है।

Interview में कैसे Explain करें?

अगर interview में पूछा जाए:

Debounced Search क्या होता है?

तो आप ऐसा जवाब दे सकते हैं:

Debounced Search एक optimization technique है जिसमें API calls को delay किया जाता है। हर key press पर API call करने के बजाय, हम user के typing बंद करने का wait करते हैं। इसके लिए setTimeout और clearTimeout का उपयोग किया जाता है। इससे unnecessary API calls कम होती हैं और application performance बेहतर होती है।