useDebounce Hook बनाना
एक useDebounce hook किसी के बात खत्म करने तक wait करने जैसा है इससे पहले कि आप respond करें, हर single word के बाद interrupt करने के बजाय।
In this page:
Syntax
function useDebounce(value, delay) {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const timer = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debounced;
}Why Debounce User Input
अगर आप हर single keystroke पर एक API search request fire करते हैं, react type करना पांच अलग requests trigger करता है, जिनमें से ज़्यादातर waste होते हैं। Debouncing user के typing रोकने तक थोड़ी देर wait करता है इससे पहले कि value को असल में उपयोग किया जाए, unnecessary work को dramatically कम करते हुए।
Note:
300-500ms का एक delay users को responsive महसूस होता है जबकि फिर भी ज़्यादातर redundant requests cut करता है।
Warning:
Debouncing throttling से अलग है — debounce activity में एक pause के लिए wait करता है, throttling इस बात को limit करती है कि कुछ कितनी बार fire हो सकता है pauses की परवाह किए बिना।
उदाहरण: Why Debounce User Input
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function useDebounce(value, delay) {
const [debounced, setDebounced] = React.useState(value);
React.useEffect(() => {
const timer = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debounced;
}
function App() {
const [text, setText] = React.useState("");
const debouncedText = useDebounce(text, 500);
return <div><input value={text} onChange={e => setText(e.target.value)} /><p>Debounced: {debouncedText}</p></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>How the Timer Resets on Every Keystroke
हर बार जब watched value change होती है, useEffect का cleanup function नया timer शुरू करने से पहले previous timer clear करता है। सिर्फ तब जब value एक timer complete होने के लिए enough लंबे समय तक change होना बंद कर देती है debounced value असल में update होती है।
Note:
Development के दौरान effect के अंदर log करें यह देखने के लिए कि कितने timers cancel होते हैं versus कितने complete होते हैं — यह behavior को concrete बनाता है।
Warning:
अगर delay खुद हर render change होती है (जैसे unstable state से computed), यह debounce timing को unpredictably behave करवा सकती है।
उदाहरण: How the Timer Resets on Every Keystroke
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function useDebounce(value, delay, onReset) {
const [debounced, setDebounced] = React.useState(value);
React.useEffect(() => {
onReset();
const timer = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debounced;
}
function App() {
const [text, setText] = React.useState("");
const [resets, setResets] = React.useState(0);
const debouncedText = useDebounce(text, 400, () => setResets(r => r + 1));
return <p>Resets: {resets}, Debounced: {debouncedText}<br/><input value={text} onChange={e => setText(e.target.value)} /></p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Using a Debounced Value for Search
useDebounce का सबसे common use एक live search box है: raw input instantly update होता है एक responsive feel के लिए, लेकिन actual filtering या API call सिर्फ debounced value के against run होता है typing pause होने के बाद।
Note:
जब भी raw text और debounced text अलग हों एक subtle 'searching...' indicator दिखाएं, ताकि users जान सकें कि एक search pending है।
Warning:
उस case को भी handle करना न भूलें जब user input पूरी तरह clear कर दे — debounced empty string को फिर भी एक reset trigger करना चाहिए।
उदाहरण: Using a Debounced Value for Search
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function useDebounce(value, delay) {
const [debounced, setDebounced] = React.useState(value);
React.useEffect(() => {
const timer = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debounced;
}
function App() {
const items = ["apple", "banana", "cherry"];
const [query, setQuery] = React.useState("");
const filtered = items.filter(i => i.includes(useDebounce(query, 300)));
return <div><input value={query} onChange={e => setQuery(e.target.value)} /><ul>{filtered.map(i => <li key={i}>{i}</li>)}</ul></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- गलत value को debounce करना — value के बजाय setter function को debounce करना, जो कुछ भी delay नहीं करता।
- Previous timeout clear करना भूल जाना, कई overlapping timers को fire करवाते हुए।
- Debounce delay को बहुत लंबा set करना, UI को user के लिए unresponsive feel करवाते हुए।
चैप्टर सारांश
- Debouncing एक value को update करने में एक inactivity period (जैसे user के type करना रोकने के 500ms बाद) तक delay करता है।
- useDebounce एक custom hook है जो एक fast-changing value की एक delayed copy return करता है।
- यह useEffect के अंदर setTimeout उपयोग करता है, जब भी input value फिर से change हो previous timeout clear करते हुए।
- यह commonly search-as-you-type inputs के लिए उपयोग होता है हर keystroke पर एक API request fire करने से बचने के लिए।
ब्राउज़र सपोर्ट
React 16.8 (Hooks introduction) से available है; setTimeout/clearTimeout सभी browsers में supported हैं।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: