@usefy/use-debounce 0.0.7 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +452 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,452 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/geon0529/usefy/master/assets/logo.png" alt="usefy logo" width="120" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<h1 align="center">@usefy/use-debounce</h1>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<strong>A feature-rich React hook for debouncing values with leading/trailing edge and maxWait support</strong>
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
<p align="center">
|
|
12
|
+
<a href="https://www.npmjs.com/package/@usefy/use-debounce">
|
|
13
|
+
<img src="https://img.shields.io/npm/v/@usefy/use-debounce.svg?style=flat-square&color=007acc" alt="npm version" />
|
|
14
|
+
</a>
|
|
15
|
+
<a href="https://www.npmjs.com/package/@usefy/use-debounce">
|
|
16
|
+
<img src="https://img.shields.io/npm/dm/@usefy/use-debounce.svg?style=flat-square&color=007acc" alt="npm downloads" />
|
|
17
|
+
</a>
|
|
18
|
+
<a href="https://bundlephobia.com/package/@usefy/use-debounce">
|
|
19
|
+
<img src="https://img.shields.io/bundlephobia/minzip/@usefy/use-debounce?style=flat-square&color=007acc" alt="bundle size" />
|
|
20
|
+
</a>
|
|
21
|
+
<a href="https://github.com/geon0529/usefy/blob/master/LICENSE">
|
|
22
|
+
<img src="https://img.shields.io/npm/l/@usefy/use-debounce.svg?style=flat-square&color=007acc" alt="license" />
|
|
23
|
+
</a>
|
|
24
|
+
</p>
|
|
25
|
+
|
|
26
|
+
<p align="center">
|
|
27
|
+
<a href="#installation">Installation</a> •
|
|
28
|
+
<a href="#quick-start">Quick Start</a> •
|
|
29
|
+
<a href="#api-reference">API Reference</a> •
|
|
30
|
+
<a href="#examples">Examples</a> •
|
|
31
|
+
<a href="#license">License</a>
|
|
32
|
+
</p>
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## Overview
|
|
37
|
+
|
|
38
|
+
`@usefy/use-debounce` is a powerful React hook for debouncing values with advanced options like leading edge, trailing edge, and maximum wait time. Perfect for search inputs, form validation, API calls, and any scenario where you need to limit the rate of value updates.
|
|
39
|
+
|
|
40
|
+
**Part of the [@usefy](https://www.npmjs.com/org/usefy) ecosystem** — a collection of production-ready React hooks designed for modern applications.
|
|
41
|
+
|
|
42
|
+
### Why use-debounce?
|
|
43
|
+
|
|
44
|
+
- **Zero Dependencies** — Pure React implementation with no external dependencies
|
|
45
|
+
- **TypeScript First** — Full type safety with generics and exported interfaces
|
|
46
|
+
- **Flexible Options** — Leading edge, trailing edge, and maxWait support
|
|
47
|
+
- **SSR Compatible** — Works seamlessly with Next.js, Remix, and other SSR frameworks
|
|
48
|
+
- **Lightweight** — Minimal bundle footprint (~400B minified + gzipped)
|
|
49
|
+
- **Well Tested** — Comprehensive test coverage with Vitest
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## Installation
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
# npm
|
|
57
|
+
npm install @usefy/use-debounce
|
|
58
|
+
|
|
59
|
+
# yarn
|
|
60
|
+
yarn add @usefy/use-debounce
|
|
61
|
+
|
|
62
|
+
# pnpm
|
|
63
|
+
pnpm add @usefy/use-debounce
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Peer Dependencies
|
|
67
|
+
|
|
68
|
+
This package requires React 18 or 19:
|
|
69
|
+
|
|
70
|
+
```json
|
|
71
|
+
{
|
|
72
|
+
"peerDependencies": {
|
|
73
|
+
"react": "^18.0.0 || ^19.0.0"
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## Quick Start
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
import { useDebounce } from '@usefy/use-debounce';
|
|
84
|
+
|
|
85
|
+
function SearchInput() {
|
|
86
|
+
const [query, setQuery] = useState('');
|
|
87
|
+
const debouncedQuery = useDebounce(query, 300);
|
|
88
|
+
|
|
89
|
+
useEffect(() => {
|
|
90
|
+
if (debouncedQuery) {
|
|
91
|
+
searchAPI(debouncedQuery);
|
|
92
|
+
}
|
|
93
|
+
}, [debouncedQuery]);
|
|
94
|
+
|
|
95
|
+
return (
|
|
96
|
+
<input
|
|
97
|
+
type="text"
|
|
98
|
+
value={query}
|
|
99
|
+
onChange={(e) => setQuery(e.target.value)}
|
|
100
|
+
placeholder="Search..."
|
|
101
|
+
/>
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
---
|
|
107
|
+
|
|
108
|
+
## API Reference
|
|
109
|
+
|
|
110
|
+
### `useDebounce<T>(value, delay?, options?)`
|
|
111
|
+
|
|
112
|
+
A hook that returns a debounced version of the provided value.
|
|
113
|
+
|
|
114
|
+
#### Parameters
|
|
115
|
+
|
|
116
|
+
| Parameter | Type | Default | Description |
|
|
117
|
+
|-----------|------|---------|-------------|
|
|
118
|
+
| `value` | `T` | — | The value to debounce |
|
|
119
|
+
| `delay` | `number` | `500` | The debounce delay in milliseconds |
|
|
120
|
+
| `options` | `UseDebounceOptions` | `{}` | Additional configuration options |
|
|
121
|
+
|
|
122
|
+
#### Options
|
|
123
|
+
|
|
124
|
+
| Option | Type | Default | Description |
|
|
125
|
+
|--------|------|---------|-------------|
|
|
126
|
+
| `leading` | `boolean` | `false` | Update on the leading edge (first call) |
|
|
127
|
+
| `trailing` | `boolean` | `true` | Update on the trailing edge (after delay) |
|
|
128
|
+
| `maxWait` | `number` | — | Maximum time to wait before forcing an update |
|
|
129
|
+
|
|
130
|
+
#### Returns
|
|
131
|
+
|
|
132
|
+
| Type | Description |
|
|
133
|
+
|------|-------------|
|
|
134
|
+
| `T` | The debounced value |
|
|
135
|
+
|
|
136
|
+
---
|
|
137
|
+
|
|
138
|
+
## Examples
|
|
139
|
+
|
|
140
|
+
### Basic Search Input
|
|
141
|
+
|
|
142
|
+
```tsx
|
|
143
|
+
import { useDebounce } from '@usefy/use-debounce';
|
|
144
|
+
|
|
145
|
+
function SearchInput() {
|
|
146
|
+
const [query, setQuery] = useState('');
|
|
147
|
+
const debouncedQuery = useDebounce(query, 300);
|
|
148
|
+
const [results, setResults] = useState([]);
|
|
149
|
+
|
|
150
|
+
useEffect(() => {
|
|
151
|
+
async function search() {
|
|
152
|
+
if (!debouncedQuery.trim()) {
|
|
153
|
+
setResults([]);
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
const data = await fetch(`/api/search?q=${debouncedQuery}`);
|
|
157
|
+
setResults(await data.json());
|
|
158
|
+
}
|
|
159
|
+
search();
|
|
160
|
+
}, [debouncedQuery]);
|
|
161
|
+
|
|
162
|
+
return (
|
|
163
|
+
<div>
|
|
164
|
+
<input
|
|
165
|
+
value={query}
|
|
166
|
+
onChange={(e) => setQuery(e.target.value)}
|
|
167
|
+
placeholder="Type to search..."
|
|
168
|
+
/>
|
|
169
|
+
<ul>
|
|
170
|
+
{results.map((result) => (
|
|
171
|
+
<li key={result.id}>{result.name}</li>
|
|
172
|
+
))}
|
|
173
|
+
</ul>
|
|
174
|
+
</div>
|
|
175
|
+
);
|
|
176
|
+
}
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### With Leading Edge (Instant First Update)
|
|
180
|
+
|
|
181
|
+
```tsx
|
|
182
|
+
import { useDebounce } from '@usefy/use-debounce';
|
|
183
|
+
|
|
184
|
+
function FilterPanel() {
|
|
185
|
+
const [filters, setFilters] = useState({ category: 'all', price: 0 });
|
|
186
|
+
|
|
187
|
+
// Update immediately on first change, then debounce subsequent changes
|
|
188
|
+
const debouncedFilters = useDebounce(filters, 500, { leading: true });
|
|
189
|
+
|
|
190
|
+
useEffect(() => {
|
|
191
|
+
applyFilters(debouncedFilters);
|
|
192
|
+
}, [debouncedFilters]);
|
|
193
|
+
|
|
194
|
+
return (
|
|
195
|
+
<div>
|
|
196
|
+
<select
|
|
197
|
+
value={filters.category}
|
|
198
|
+
onChange={(e) => setFilters(f => ({ ...f, category: e.target.value }))}
|
|
199
|
+
>
|
|
200
|
+
<option value="all">All</option>
|
|
201
|
+
<option value="electronics">Electronics</option>
|
|
202
|
+
<option value="clothing">Clothing</option>
|
|
203
|
+
</select>
|
|
204
|
+
<input
|
|
205
|
+
type="range"
|
|
206
|
+
value={filters.price}
|
|
207
|
+
onChange={(e) => setFilters(f => ({ ...f, price: +e.target.value }))}
|
|
208
|
+
/>
|
|
209
|
+
</div>
|
|
210
|
+
);
|
|
211
|
+
}
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
### With maxWait (Guaranteed Updates)
|
|
215
|
+
|
|
216
|
+
```tsx
|
|
217
|
+
import { useDebounce } from '@usefy/use-debounce';
|
|
218
|
+
|
|
219
|
+
function AutoSaveEditor() {
|
|
220
|
+
const [content, setContent] = useState('');
|
|
221
|
+
|
|
222
|
+
// Debounce for 1 second, but guarantee save every 5 seconds during continuous typing
|
|
223
|
+
const debouncedContent = useDebounce(content, 1000, { maxWait: 5000 });
|
|
224
|
+
|
|
225
|
+
useEffect(() => {
|
|
226
|
+
if (debouncedContent) {
|
|
227
|
+
saveToServer(debouncedContent);
|
|
228
|
+
}
|
|
229
|
+
}, [debouncedContent]);
|
|
230
|
+
|
|
231
|
+
return (
|
|
232
|
+
<textarea
|
|
233
|
+
value={content}
|
|
234
|
+
onChange={(e) => setContent(e.target.value)}
|
|
235
|
+
placeholder="Start typing... (auto-saves)"
|
|
236
|
+
/>
|
|
237
|
+
);
|
|
238
|
+
}
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
### Form Validation
|
|
242
|
+
|
|
243
|
+
```tsx
|
|
244
|
+
import { useDebounce } from '@usefy/use-debounce';
|
|
245
|
+
|
|
246
|
+
function RegistrationForm() {
|
|
247
|
+
const [username, setUsername] = useState('');
|
|
248
|
+
const [error, setError] = useState('');
|
|
249
|
+
const debouncedUsername = useDebounce(username, 500);
|
|
250
|
+
|
|
251
|
+
useEffect(() => {
|
|
252
|
+
async function checkAvailability() {
|
|
253
|
+
if (debouncedUsername.length < 3) {
|
|
254
|
+
setError('Username must be at least 3 characters');
|
|
255
|
+
return;
|
|
256
|
+
}
|
|
257
|
+
const response = await fetch(`/api/check-username?u=${debouncedUsername}`);
|
|
258
|
+
const { available } = await response.json();
|
|
259
|
+
setError(available ? '' : 'Username is already taken');
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
if (debouncedUsername) {
|
|
263
|
+
checkAvailability();
|
|
264
|
+
}
|
|
265
|
+
}, [debouncedUsername]);
|
|
266
|
+
|
|
267
|
+
return (
|
|
268
|
+
<div>
|
|
269
|
+
<input
|
|
270
|
+
value={username}
|
|
271
|
+
onChange={(e) => setUsername(e.target.value)}
|
|
272
|
+
placeholder="Choose a username"
|
|
273
|
+
/>
|
|
274
|
+
{error && <span className="error">{error}</span>}
|
|
275
|
+
</div>
|
|
276
|
+
);
|
|
277
|
+
}
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
### Debouncing Object Values
|
|
281
|
+
|
|
282
|
+
```tsx
|
|
283
|
+
import { useDebounce } from '@usefy/use-debounce';
|
|
284
|
+
|
|
285
|
+
function FilteredTable() {
|
|
286
|
+
const [filters, setFilters] = useState({
|
|
287
|
+
search: '',
|
|
288
|
+
status: 'all',
|
|
289
|
+
sortBy: 'date',
|
|
290
|
+
});
|
|
291
|
+
|
|
292
|
+
const debouncedFilters = useDebounce(filters, 300);
|
|
293
|
+
|
|
294
|
+
useEffect(() => {
|
|
295
|
+
fetchTableData(debouncedFilters);
|
|
296
|
+
}, [debouncedFilters]);
|
|
297
|
+
|
|
298
|
+
return (
|
|
299
|
+
<div>
|
|
300
|
+
<input
|
|
301
|
+
value={filters.search}
|
|
302
|
+
onChange={(e) => setFilters(f => ({ ...f, search: e.target.value }))}
|
|
303
|
+
placeholder="Search..."
|
|
304
|
+
/>
|
|
305
|
+
<select
|
|
306
|
+
value={filters.status}
|
|
307
|
+
onChange={(e) => setFilters(f => ({ ...f, status: e.target.value }))}
|
|
308
|
+
>
|
|
309
|
+
<option value="all">All</option>
|
|
310
|
+
<option value="active">Active</option>
|
|
311
|
+
<option value="inactive">Inactive</option>
|
|
312
|
+
</select>
|
|
313
|
+
</div>
|
|
314
|
+
);
|
|
315
|
+
}
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
---
|
|
319
|
+
|
|
320
|
+
## TypeScript
|
|
321
|
+
|
|
322
|
+
This hook is written in TypeScript with full generic support.
|
|
323
|
+
|
|
324
|
+
```tsx
|
|
325
|
+
import { useDebounce, type UseDebounceOptions } from '@usefy/use-debounce';
|
|
326
|
+
|
|
327
|
+
// Generic type inference
|
|
328
|
+
const debouncedString = useDebounce('hello', 300); // string
|
|
329
|
+
const debouncedNumber = useDebounce(42, 300); // number
|
|
330
|
+
const debouncedObject = useDebounce({ x: 1 }, 300); // { x: number }
|
|
331
|
+
|
|
332
|
+
// Explicit generic type
|
|
333
|
+
interface Filters {
|
|
334
|
+
search: string;
|
|
335
|
+
category: string;
|
|
336
|
+
}
|
|
337
|
+
const debouncedFilters = useDebounce<Filters>(filters, 300);
|
|
338
|
+
```
|
|
339
|
+
|
|
340
|
+
---
|
|
341
|
+
|
|
342
|
+
## Testing
|
|
343
|
+
|
|
344
|
+
This package maintains comprehensive test coverage to ensure reliability and stability.
|
|
345
|
+
|
|
346
|
+
### Test Coverage
|
|
347
|
+
|
|
348
|
+
| Category | Tests | Coverage |
|
|
349
|
+
|----------|-------|----------|
|
|
350
|
+
| Initialization | 6 | 100% |
|
|
351
|
+
| Basic Debouncing | 6 | 100% |
|
|
352
|
+
| Leading Edge | 5 | 100% |
|
|
353
|
+
| Trailing Edge | 3 | 100% |
|
|
354
|
+
| maxWait Option | 5 | 100% |
|
|
355
|
+
| Option Changes | 3 | 100% |
|
|
356
|
+
| Type Preservation | 5 | 100% |
|
|
357
|
+
| Cleanup | 2 | 100% |
|
|
358
|
+
| Edge Cases | 6 | 100% |
|
|
359
|
+
| **Total** | **41** | **93.02%** |
|
|
360
|
+
|
|
361
|
+
### Test Categories
|
|
362
|
+
|
|
363
|
+
<details>
|
|
364
|
+
<summary><strong>Initialization Tests</strong></summary>
|
|
365
|
+
|
|
366
|
+
- Initialize with initial value
|
|
367
|
+
- Initialize with different types (string, number, boolean, object, array)
|
|
368
|
+
- Use default delay of 500ms
|
|
369
|
+
|
|
370
|
+
</details>
|
|
371
|
+
|
|
372
|
+
<details>
|
|
373
|
+
<summary><strong>Leading/Trailing Edge Tests</strong></summary>
|
|
374
|
+
|
|
375
|
+
- Update immediately with leading: true
|
|
376
|
+
- Do not update immediately with leading: false (default)
|
|
377
|
+
- Update on trailing edge with trailing: true (default)
|
|
378
|
+
- No update with trailing: false
|
|
379
|
+
- Combined leading and trailing options
|
|
380
|
+
|
|
381
|
+
</details>
|
|
382
|
+
|
|
383
|
+
<details>
|
|
384
|
+
<summary><strong>maxWait Tests</strong></summary>
|
|
385
|
+
|
|
386
|
+
- Force update after maxWait even with continuous changes
|
|
387
|
+
- Respect maxWait when delay is longer
|
|
388
|
+
- Work correctly with both leading and maxWait
|
|
389
|
+
|
|
390
|
+
</details>
|
|
391
|
+
|
|
392
|
+
### Running Tests
|
|
393
|
+
|
|
394
|
+
```bash
|
|
395
|
+
# Run all tests
|
|
396
|
+
pnpm test
|
|
397
|
+
|
|
398
|
+
# Run tests in watch mode
|
|
399
|
+
pnpm test:watch
|
|
400
|
+
|
|
401
|
+
# Run tests with coverage report
|
|
402
|
+
pnpm test --coverage
|
|
403
|
+
```
|
|
404
|
+
|
|
405
|
+
---
|
|
406
|
+
|
|
407
|
+
## Related Packages
|
|
408
|
+
|
|
409
|
+
Explore other hooks in the **@usefy** collection:
|
|
410
|
+
|
|
411
|
+
| Package | Description |
|
|
412
|
+
|---------|-------------|
|
|
413
|
+
| [@usefy/use-debounce-callback](https://www.npmjs.com/package/@usefy/use-debounce-callback) | Debounced callbacks with cancel/flush |
|
|
414
|
+
| [@usefy/use-throttle](https://www.npmjs.com/package/@usefy/use-throttle) | Value throttling |
|
|
415
|
+
| [@usefy/use-throttle-callback](https://www.npmjs.com/package/@usefy/use-throttle-callback) | Throttled callbacks |
|
|
416
|
+
| [@usefy/use-toggle](https://www.npmjs.com/package/@usefy/use-toggle) | Boolean state management |
|
|
417
|
+
| [@usefy/use-counter](https://www.npmjs.com/package/@usefy/use-counter) | Counter state management |
|
|
418
|
+
| [@usefy/use-click-any-where](https://www.npmjs.com/package/@usefy/use-click-any-where) | Global click detection |
|
|
419
|
+
|
|
420
|
+
---
|
|
421
|
+
|
|
422
|
+
## Contributing
|
|
423
|
+
|
|
424
|
+
We welcome contributions! Please see our [Contributing Guide](https://github.com/geon0529/usefy/blob/master/CONTRIBUTING.md) for details.
|
|
425
|
+
|
|
426
|
+
```bash
|
|
427
|
+
# Clone the repository
|
|
428
|
+
git clone https://github.com/geon0529/usefy.git
|
|
429
|
+
|
|
430
|
+
# Install dependencies
|
|
431
|
+
pnpm install
|
|
432
|
+
|
|
433
|
+
# Run tests
|
|
434
|
+
pnpm test
|
|
435
|
+
|
|
436
|
+
# Build
|
|
437
|
+
pnpm build
|
|
438
|
+
```
|
|
439
|
+
|
|
440
|
+
---
|
|
441
|
+
|
|
442
|
+
## License
|
|
443
|
+
|
|
444
|
+
MIT © [mirunamu](https://github.com/geon0529)
|
|
445
|
+
|
|
446
|
+
This package is part of the [usefy](https://github.com/geon0529/usefy) monorepo.
|
|
447
|
+
|
|
448
|
+
---
|
|
449
|
+
|
|
450
|
+
<p align="center">
|
|
451
|
+
<sub>Built with care by the usefy team</sub>
|
|
452
|
+
</p>
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/useDebounce.ts"],"sourcesContent":["export { useDebounce, type UseDebounceOptions } from \"./useDebounce\";\r\n","import { useEffect, useRef, useState } from \"react\";\r\n\r\n/**\r\n * Options for useDebounce hook\r\n */\r\nexport interface UseDebounceOptions {\r\n /**\r\n * Maximum time the debounced value can be delayed\r\n * @default undefined (no maximum)\r\n */\r\n maxWait?: number;\r\n /**\r\n * Whether to update the debounced value on the leading edge\r\n * @default false\r\n */\r\n leading?: boolean;\r\n /**\r\n * Whether to update the debounced value on the trailing edge\r\n * @default true\r\n */\r\n trailing?: boolean;\r\n}\r\n\r\n/**\r\n * Debounces a value by delaying updates until after a specified delay period has elapsed\r\n * since the last time the value changed. Useful for search inputs and API calls.\r\n *\r\n * @template T - The type of the value to debounce\r\n * @param value - The value to debounce\r\n * @param delay - The delay in milliseconds (default: 500ms)\r\n * @param options - Additional options for controlling debounce behavior\r\n * @returns The debounced value\r\n *\r\n * @example\r\n * ```tsx\r\n * function SearchInput() {\r\n * const [searchTerm, setSearchTerm] = useState('');\r\n * const debouncedSearchTerm = useDebounce(searchTerm, 500);\r\n *\r\n * useEffect(() => {\r\n * if (debouncedSearchTerm) {\r\n * // API call with debounced value\r\n * searchAPI(debouncedSearchTerm);\r\n * }\r\n * }, [debouncedSearchTerm]);\r\n *\r\n * return (\r\n * <input\r\n * type=\"text\"\r\n * value={searchTerm}\r\n * onChange={(e) => setSearchTerm(e.target.value)}\r\n * placeholder=\"Search...\"\r\n * />\r\n * );\r\n * }\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * // With leading edge update\r\n * const debouncedValue = useDebounce(value, 300, { leading: true });\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * // With maximum wait time\r\n * const debouncedValue = useDebounce(value, 500, { maxWait: 2000 });\r\n * ```\r\n */\r\nexport function useDebounce<T>(\r\n value: T,\r\n delay: number = 500,\r\n options: UseDebounceOptions = {}\r\n): T {\r\n // Parse options\r\n const wait = delay || 0;\r\n const leading = options.leading ?? false;\r\n const trailing = options.trailing !== undefined ? options.trailing : true;\r\n const maxing = \"maxWait\" in options;\r\n const maxWait = maxing ? Math.max(options.maxWait || 0, wait) : undefined;\r\n\r\n const [debouncedValue, setDebouncedValue] = useState<T>(value);\r\n const timerIdRef = useRef<ReturnType<typeof setTimeout> | undefined>(\r\n undefined\r\n );\r\n const lastCallTimeRef = useRef<number | undefined>(undefined);\r\n const lastInvokeTimeRef = useRef<number>(0);\r\n const lastValueRef = useRef<T>(value);\r\n const prevValueRef = useRef<T>(value); // Track previous value to detect actual changes\r\n\r\n // Store options in refs to access latest values in timer callbacks\r\n const waitRef = useRef(wait);\r\n const leadingRef = useRef(leading);\r\n const trailingRef = useRef(trailing);\r\n const maxingRef = useRef(maxing);\r\n const maxWaitRef = useRef(maxWait);\r\n\r\n // Update refs when options change\r\n waitRef.current = wait;\r\n leadingRef.current = leading;\r\n trailingRef.current = trailing;\r\n maxingRef.current = maxing;\r\n maxWaitRef.current = maxWait;\r\n\r\n // Helper function to get current time\r\n const now = () => Date.now();\r\n\r\n // Define helper functions using refs for latest values\r\n const shouldInvokeRef = useRef<(time: number) => boolean>(() => false);\r\n const invokeRef = useRef<(time: number) => void>(() => {});\r\n const remainingWaitRef = useRef<(time: number) => number>(() => 0);\r\n const timerExpiredRef = useRef<() => void>(() => {});\r\n const trailingEdgeRef = useRef<(time: number) => void>(() => {});\r\n const leadingEdgeRef = useRef<(time: number) => void>(() => {});\r\n\r\n // Helper function: shouldInvoke\r\n shouldInvokeRef.current = (time: number): boolean => {\r\n const lastCallTime = lastCallTimeRef.current;\r\n if (lastCallTime === undefined) {\r\n return true; // First call\r\n }\r\n\r\n const timeSinceLastCall = time - lastCallTime;\r\n const timeSinceLastInvoke = time - lastInvokeTimeRef.current;\r\n\r\n return (\r\n timeSinceLastCall >= waitRef.current ||\r\n timeSinceLastCall < 0 || // System time went backwards\r\n (maxingRef.current &&\r\n timeSinceLastInvoke >= (maxWaitRef.current as number))\r\n );\r\n };\r\n\r\n // Helper function: invokeFunc\r\n invokeRef.current = (time: number): void => {\r\n setDebouncedValue(lastValueRef.current);\r\n lastInvokeTimeRef.current = time;\r\n };\r\n\r\n // Helper function: remainingWait\r\n remainingWaitRef.current = (time: number): number => {\r\n const lastCallTime = lastCallTimeRef.current;\r\n if (lastCallTime === undefined) {\r\n return waitRef.current;\r\n }\r\n\r\n const timeSinceLastCall = time - lastCallTime;\r\n const timeSinceLastInvoke = time - lastInvokeTimeRef.current;\r\n const timeWaiting = waitRef.current - timeSinceLastCall;\r\n\r\n return maxingRef.current\r\n ? Math.min(\r\n timeWaiting,\r\n (maxWaitRef.current as number) - timeSinceLastInvoke\r\n )\r\n : timeWaiting;\r\n };\r\n\r\n // Helper function: trailingEdge\r\n trailingEdgeRef.current = (time: number): void => {\r\n timerIdRef.current = undefined;\r\n\r\n // Only invoke if we have `lastValueRef.current` which means `value` has been\r\n // debounced at least once.\r\n if (trailingRef.current && lastCallTimeRef.current !== undefined) {\r\n invokeRef.current(time);\r\n }\r\n };\r\n\r\n // Helper function: timerExpired\r\n timerExpiredRef.current = (): void => {\r\n const time = now();\r\n if (shouldInvokeRef.current(time)) {\r\n trailingEdgeRef.current(time);\r\n } else {\r\n // Restart the timer.\r\n timerIdRef.current = setTimeout(\r\n () => timerExpiredRef.current(),\r\n remainingWaitRef.current(time)\r\n );\r\n }\r\n };\r\n\r\n // Helper function: leadingEdge\r\n leadingEdgeRef.current = (time: number): void => {\r\n // Reset any `maxWait` timer.\r\n lastInvokeTimeRef.current = time;\r\n // Start the timer for the trailing edge.\r\n timerIdRef.current = setTimeout(\r\n () => timerExpiredRef.current(),\r\n waitRef.current\r\n );\r\n // Invoke the leading edge.\r\n if (leadingRef.current) {\r\n invokeRef.current(time);\r\n }\r\n };\r\n\r\n // Cleanup on unmount only\r\n useEffect(() => {\r\n return () => {\r\n if (timerIdRef.current !== undefined) {\r\n clearTimeout(timerIdRef.current);\r\n }\r\n };\r\n }, []);\r\n\r\n // Main debounce effect - runs when value changes\r\n useEffect(() => {\r\n // Skip if value hasn't actually changed (prevents initial render from consuming leading edge)\r\n if (Object.is(prevValueRef.current, value)) {\r\n return;\r\n }\r\n prevValueRef.current = value;\r\n\r\n const time = now();\r\n const isInvoking = shouldInvokeRef.current(time);\r\n\r\n // Update lastValueRef with current value\r\n lastValueRef.current = value;\r\n lastCallTimeRef.current = time;\r\n\r\n if (isInvoking) {\r\n if (timerIdRef.current === undefined) {\r\n leadingEdgeRef.current(time);\r\n } else if (maxingRef.current) {\r\n // Handle invocations in a tight loop.\r\n clearTimeout(timerIdRef.current);\r\n timerIdRef.current = setTimeout(\r\n () => timerExpiredRef.current(),\r\n waitRef.current\r\n );\r\n invokeRef.current(time);\r\n }\r\n } else {\r\n if (timerIdRef.current === undefined) {\r\n // Start timer with wait\r\n // remainingWait is only used inside timerExpired for restarting\r\n timerIdRef.current = setTimeout(\r\n () => timerExpiredRef.current(),\r\n waitRef.current\r\n );\r\n }\r\n }\r\n // No cleanup here - timer should persist across value changes\r\n // This is the key difference from the previous implementation\r\n }, [value]);\r\n\r\n return debouncedValue;\r\n}\r\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/useDebounce.ts"],"sourcesContent":["export { useDebounce, type UseDebounceOptions } from \"./useDebounce\";\n","import { useEffect, useRef, useState } from \"react\";\n\n/**\n * Options for useDebounce hook\n */\nexport interface UseDebounceOptions {\n /**\n * Maximum time the debounced value can be delayed\n * @default undefined (no maximum)\n */\n maxWait?: number;\n /**\n * Whether to update the debounced value on the leading edge\n * @default false\n */\n leading?: boolean;\n /**\n * Whether to update the debounced value on the trailing edge\n * @default true\n */\n trailing?: boolean;\n}\n\n/**\n * Debounces a value by delaying updates until after a specified delay period has elapsed\n * since the last time the value changed. Useful for search inputs and API calls.\n *\n * @template T - The type of the value to debounce\n * @param value - The value to debounce\n * @param delay - The delay in milliseconds (default: 500ms)\n * @param options - Additional options for controlling debounce behavior\n * @returns The debounced value\n *\n * @example\n * ```tsx\n * function SearchInput() {\n * const [searchTerm, setSearchTerm] = useState('');\n * const debouncedSearchTerm = useDebounce(searchTerm, 500);\n *\n * useEffect(() => {\n * if (debouncedSearchTerm) {\n * // API call with debounced value\n * searchAPI(debouncedSearchTerm);\n * }\n * }, [debouncedSearchTerm]);\n *\n * return (\n * <input\n * type=\"text\"\n * value={searchTerm}\n * onChange={(e) => setSearchTerm(e.target.value)}\n * placeholder=\"Search...\"\n * />\n * );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With leading edge update\n * const debouncedValue = useDebounce(value, 300, { leading: true });\n * ```\n *\n * @example\n * ```tsx\n * // With maximum wait time\n * const debouncedValue = useDebounce(value, 500, { maxWait: 2000 });\n * ```\n */\nexport function useDebounce<T>(\n value: T,\n delay: number = 500,\n options: UseDebounceOptions = {}\n): T {\n // Parse options\n const wait = delay || 0;\n const leading = options.leading ?? false;\n const trailing = options.trailing !== undefined ? options.trailing : true;\n const maxing = \"maxWait\" in options;\n const maxWait = maxing ? Math.max(options.maxWait || 0, wait) : undefined;\n\n const [debouncedValue, setDebouncedValue] = useState<T>(value);\n const timerIdRef = useRef<ReturnType<typeof setTimeout> | undefined>(\n undefined\n );\n const lastCallTimeRef = useRef<number | undefined>(undefined);\n const lastInvokeTimeRef = useRef<number>(0);\n const lastValueRef = useRef<T>(value);\n const prevValueRef = useRef<T>(value); // Track previous value to detect actual changes\n\n // Store options in refs to access latest values in timer callbacks\n const waitRef = useRef(wait);\n const leadingRef = useRef(leading);\n const trailingRef = useRef(trailing);\n const maxingRef = useRef(maxing);\n const maxWaitRef = useRef(maxWait);\n\n // Update refs when options change\n waitRef.current = wait;\n leadingRef.current = leading;\n trailingRef.current = trailing;\n maxingRef.current = maxing;\n maxWaitRef.current = maxWait;\n\n // Helper function to get current time\n const now = () => Date.now();\n\n // Define helper functions using refs for latest values\n const shouldInvokeRef = useRef<(time: number) => boolean>(() => false);\n const invokeRef = useRef<(time: number) => void>(() => {});\n const remainingWaitRef = useRef<(time: number) => number>(() => 0);\n const timerExpiredRef = useRef<() => void>(() => {});\n const trailingEdgeRef = useRef<(time: number) => void>(() => {});\n const leadingEdgeRef = useRef<(time: number) => void>(() => {});\n\n // Helper function: shouldInvoke\n shouldInvokeRef.current = (time: number): boolean => {\n const lastCallTime = lastCallTimeRef.current;\n if (lastCallTime === undefined) {\n return true; // First call\n }\n\n const timeSinceLastCall = time - lastCallTime;\n const timeSinceLastInvoke = time - lastInvokeTimeRef.current;\n\n return (\n timeSinceLastCall >= waitRef.current ||\n timeSinceLastCall < 0 || // System time went backwards\n (maxingRef.current &&\n timeSinceLastInvoke >= (maxWaitRef.current as number))\n );\n };\n\n // Helper function: invokeFunc\n invokeRef.current = (time: number): void => {\n setDebouncedValue(lastValueRef.current);\n lastInvokeTimeRef.current = time;\n };\n\n // Helper function: remainingWait\n remainingWaitRef.current = (time: number): number => {\n const lastCallTime = lastCallTimeRef.current;\n if (lastCallTime === undefined) {\n return waitRef.current;\n }\n\n const timeSinceLastCall = time - lastCallTime;\n const timeSinceLastInvoke = time - lastInvokeTimeRef.current;\n const timeWaiting = waitRef.current - timeSinceLastCall;\n\n return maxingRef.current\n ? Math.min(\n timeWaiting,\n (maxWaitRef.current as number) - timeSinceLastInvoke\n )\n : timeWaiting;\n };\n\n // Helper function: trailingEdge\n trailingEdgeRef.current = (time: number): void => {\n timerIdRef.current = undefined;\n\n // Only invoke if we have `lastValueRef.current` which means `value` has been\n // debounced at least once.\n if (trailingRef.current && lastCallTimeRef.current !== undefined) {\n invokeRef.current(time);\n }\n };\n\n // Helper function: timerExpired\n timerExpiredRef.current = (): void => {\n const time = now();\n if (shouldInvokeRef.current(time)) {\n trailingEdgeRef.current(time);\n } else {\n // Restart the timer.\n timerIdRef.current = setTimeout(\n () => timerExpiredRef.current(),\n remainingWaitRef.current(time)\n );\n }\n };\n\n // Helper function: leadingEdge\n leadingEdgeRef.current = (time: number): void => {\n // Reset any `maxWait` timer.\n lastInvokeTimeRef.current = time;\n // Start the timer for the trailing edge.\n timerIdRef.current = setTimeout(\n () => timerExpiredRef.current(),\n waitRef.current\n );\n // Invoke the leading edge.\n if (leadingRef.current) {\n invokeRef.current(time);\n }\n };\n\n // Cleanup on unmount only\n useEffect(() => {\n return () => {\n if (timerIdRef.current !== undefined) {\n clearTimeout(timerIdRef.current);\n }\n };\n }, []);\n\n // Main debounce effect - runs when value changes\n useEffect(() => {\n // Skip if value hasn't actually changed (prevents initial render from consuming leading edge)\n if (Object.is(prevValueRef.current, value)) {\n return;\n }\n prevValueRef.current = value;\n\n const time = now();\n const isInvoking = shouldInvokeRef.current(time);\n\n // Update lastValueRef with current value\n lastValueRef.current = value;\n lastCallTimeRef.current = time;\n\n if (isInvoking) {\n if (timerIdRef.current === undefined) {\n leadingEdgeRef.current(time);\n } else if (maxingRef.current) {\n // Handle invocations in a tight loop.\n clearTimeout(timerIdRef.current);\n timerIdRef.current = setTimeout(\n () => timerExpiredRef.current(),\n waitRef.current\n );\n invokeRef.current(time);\n }\n } else {\n if (timerIdRef.current === undefined) {\n // Start timer with wait\n // remainingWait is only used inside timerExpired for restarting\n timerIdRef.current = setTimeout(\n () => timerExpiredRef.current(),\n waitRef.current\n );\n }\n }\n // No cleanup here - timer should persist across value changes\n // This is the key difference from the previous implementation\n }, [value]);\n\n return debouncedValue;\n}\n"],"mappings":"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","names":[]}
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useDebounce.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\r\n\r\n/**\r\n * Options for useDebounce hook\r\n */\r\nexport interface UseDebounceOptions {\r\n /**\r\n * Maximum time the debounced value can be delayed\r\n * @default undefined (no maximum)\r\n */\r\n maxWait?: number;\r\n /**\r\n * Whether to update the debounced value on the leading edge\r\n * @default false\r\n */\r\n leading?: boolean;\r\n /**\r\n * Whether to update the debounced value on the trailing edge\r\n * @default true\r\n */\r\n trailing?: boolean;\r\n}\r\n\r\n/**\r\n * Debounces a value by delaying updates until after a specified delay period has elapsed\r\n * since the last time the value changed. Useful for search inputs and API calls.\r\n *\r\n * @template T - The type of the value to debounce\r\n * @param value - The value to debounce\r\n * @param delay - The delay in milliseconds (default: 500ms)\r\n * @param options - Additional options for controlling debounce behavior\r\n * @returns The debounced value\r\n *\r\n * @example\r\n * ```tsx\r\n * function SearchInput() {\r\n * const [searchTerm, setSearchTerm] = useState('');\r\n * const debouncedSearchTerm = useDebounce(searchTerm, 500);\r\n *\r\n * useEffect(() => {\r\n * if (debouncedSearchTerm) {\r\n * // API call with debounced value\r\n * searchAPI(debouncedSearchTerm);\r\n * }\r\n * }, [debouncedSearchTerm]);\r\n *\r\n * return (\r\n * <input\r\n * type=\"text\"\r\n * value={searchTerm}\r\n * onChange={(e) => setSearchTerm(e.target.value)}\r\n * placeholder=\"Search...\"\r\n * />\r\n * );\r\n * }\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * // With leading edge update\r\n * const debouncedValue = useDebounce(value, 300, { leading: true });\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * // With maximum wait time\r\n * const debouncedValue = useDebounce(value, 500, { maxWait: 2000 });\r\n * ```\r\n */\r\nexport function useDebounce<T>(\r\n value: T,\r\n delay: number = 500,\r\n options: UseDebounceOptions = {}\r\n): T {\r\n // Parse options\r\n const wait = delay || 0;\r\n const leading = options.leading ?? false;\r\n const trailing = options.trailing !== undefined ? options.trailing : true;\r\n const maxing = \"maxWait\" in options;\r\n const maxWait = maxing ? Math.max(options.maxWait || 0, wait) : undefined;\r\n\r\n const [debouncedValue, setDebouncedValue] = useState<T>(value);\r\n const timerIdRef = useRef<ReturnType<typeof setTimeout> | undefined>(\r\n undefined\r\n );\r\n const lastCallTimeRef = useRef<number | undefined>(undefined);\r\n const lastInvokeTimeRef = useRef<number>(0);\r\n const lastValueRef = useRef<T>(value);\r\n const prevValueRef = useRef<T>(value); // Track previous value to detect actual changes\r\n\r\n // Store options in refs to access latest values in timer callbacks\r\n const waitRef = useRef(wait);\r\n const leadingRef = useRef(leading);\r\n const trailingRef = useRef(trailing);\r\n const maxingRef = useRef(maxing);\r\n const maxWaitRef = useRef(maxWait);\r\n\r\n // Update refs when options change\r\n waitRef.current = wait;\r\n leadingRef.current = leading;\r\n trailingRef.current = trailing;\r\n maxingRef.current = maxing;\r\n maxWaitRef.current = maxWait;\r\n\r\n // Helper function to get current time\r\n const now = () => Date.now();\r\n\r\n // Define helper functions using refs for latest values\r\n const shouldInvokeRef = useRef<(time: number) => boolean>(() => false);\r\n const invokeRef = useRef<(time: number) => void>(() => {});\r\n const remainingWaitRef = useRef<(time: number) => number>(() => 0);\r\n const timerExpiredRef = useRef<() => void>(() => {});\r\n const trailingEdgeRef = useRef<(time: number) => void>(() => {});\r\n const leadingEdgeRef = useRef<(time: number) => void>(() => {});\r\n\r\n // Helper function: shouldInvoke\r\n shouldInvokeRef.current = (time: number): boolean => {\r\n const lastCallTime = lastCallTimeRef.current;\r\n if (lastCallTime === undefined) {\r\n return true; // First call\r\n }\r\n\r\n const timeSinceLastCall = time - lastCallTime;\r\n const timeSinceLastInvoke = time - lastInvokeTimeRef.current;\r\n\r\n return (\r\n timeSinceLastCall >= waitRef.current ||\r\n timeSinceLastCall < 0 || // System time went backwards\r\n (maxingRef.current &&\r\n timeSinceLastInvoke >= (maxWaitRef.current as number))\r\n );\r\n };\r\n\r\n // Helper function: invokeFunc\r\n invokeRef.current = (time: number): void => {\r\n setDebouncedValue(lastValueRef.current);\r\n lastInvokeTimeRef.current = time;\r\n };\r\n\r\n // Helper function: remainingWait\r\n remainingWaitRef.current = (time: number): number => {\r\n const lastCallTime = lastCallTimeRef.current;\r\n if (lastCallTime === undefined) {\r\n return waitRef.current;\r\n }\r\n\r\n const timeSinceLastCall = time - lastCallTime;\r\n const timeSinceLastInvoke = time - lastInvokeTimeRef.current;\r\n const timeWaiting = waitRef.current - timeSinceLastCall;\r\n\r\n return maxingRef.current\r\n ? Math.min(\r\n timeWaiting,\r\n (maxWaitRef.current as number) - timeSinceLastInvoke\r\n )\r\n : timeWaiting;\r\n };\r\n\r\n // Helper function: trailingEdge\r\n trailingEdgeRef.current = (time: number): void => {\r\n timerIdRef.current = undefined;\r\n\r\n // Only invoke if we have `lastValueRef.current` which means `value` has been\r\n // debounced at least once.\r\n if (trailingRef.current && lastCallTimeRef.current !== undefined) {\r\n invokeRef.current(time);\r\n }\r\n };\r\n\r\n // Helper function: timerExpired\r\n timerExpiredRef.current = (): void => {\r\n const time = now();\r\n if (shouldInvokeRef.current(time)) {\r\n trailingEdgeRef.current(time);\r\n } else {\r\n // Restart the timer.\r\n timerIdRef.current = setTimeout(\r\n () => timerExpiredRef.current(),\r\n remainingWaitRef.current(time)\r\n );\r\n }\r\n };\r\n\r\n // Helper function: leadingEdge\r\n leadingEdgeRef.current = (time: number): void => {\r\n // Reset any `maxWait` timer.\r\n lastInvokeTimeRef.current = time;\r\n // Start the timer for the trailing edge.\r\n timerIdRef.current = setTimeout(\r\n () => timerExpiredRef.current(),\r\n waitRef.current\r\n );\r\n // Invoke the leading edge.\r\n if (leadingRef.current) {\r\n invokeRef.current(time);\r\n }\r\n };\r\n\r\n // Cleanup on unmount only\r\n useEffect(() => {\r\n return () => {\r\n if (timerIdRef.current !== undefined) {\r\n clearTimeout(timerIdRef.current);\r\n }\r\n };\r\n }, []);\r\n\r\n // Main debounce effect - runs when value changes\r\n useEffect(() => {\r\n // Skip if value hasn't actually changed (prevents initial render from consuming leading edge)\r\n if (Object.is(prevValueRef.current, value)) {\r\n return;\r\n }\r\n prevValueRef.current = value;\r\n\r\n const time = now();\r\n const isInvoking = shouldInvokeRef.current(time);\r\n\r\n // Update lastValueRef with current value\r\n lastValueRef.current = value;\r\n lastCallTimeRef.current = time;\r\n\r\n if (isInvoking) {\r\n if (timerIdRef.current === undefined) {\r\n leadingEdgeRef.current(time);\r\n } else if (maxingRef.current) {\r\n // Handle invocations in a tight loop.\r\n clearTimeout(timerIdRef.current);\r\n timerIdRef.current = setTimeout(\r\n () => timerExpiredRef.current(),\r\n waitRef.current\r\n );\r\n invokeRef.current(time);\r\n }\r\n } else {\r\n if (timerIdRef.current === undefined) {\r\n // Start timer with wait\r\n // remainingWait is only used inside timerExpired for restarting\r\n timerIdRef.current = setTimeout(\r\n () => timerExpiredRef.current(),\r\n waitRef.current\r\n );\r\n }\r\n }\r\n // No cleanup here - timer should persist across value changes\r\n // This is the key difference from the previous implementation\r\n }, [value]);\r\n\r\n return debouncedValue;\r\n}\r\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/useDebounce.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\n/**\n * Options for useDebounce hook\n */\nexport interface UseDebounceOptions {\n /**\n * Maximum time the debounced value can be delayed\n * @default undefined (no maximum)\n */\n maxWait?: number;\n /**\n * Whether to update the debounced value on the leading edge\n * @default false\n */\n leading?: boolean;\n /**\n * Whether to update the debounced value on the trailing edge\n * @default true\n */\n trailing?: boolean;\n}\n\n/**\n * Debounces a value by delaying updates until after a specified delay period has elapsed\n * since the last time the value changed. Useful for search inputs and API calls.\n *\n * @template T - The type of the value to debounce\n * @param value - The value to debounce\n * @param delay - The delay in milliseconds (default: 500ms)\n * @param options - Additional options for controlling debounce behavior\n * @returns The debounced value\n *\n * @example\n * ```tsx\n * function SearchInput() {\n * const [searchTerm, setSearchTerm] = useState('');\n * const debouncedSearchTerm = useDebounce(searchTerm, 500);\n *\n * useEffect(() => {\n * if (debouncedSearchTerm) {\n * // API call with debounced value\n * searchAPI(debouncedSearchTerm);\n * }\n * }, [debouncedSearchTerm]);\n *\n * return (\n * <input\n * type=\"text\"\n * value={searchTerm}\n * onChange={(e) => setSearchTerm(e.target.value)}\n * placeholder=\"Search...\"\n * />\n * );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With leading edge update\n * const debouncedValue = useDebounce(value, 300, { leading: true });\n * ```\n *\n * @example\n * ```tsx\n * // With maximum wait time\n * const debouncedValue = useDebounce(value, 500, { maxWait: 2000 });\n * ```\n */\nexport function useDebounce<T>(\n value: T,\n delay: number = 500,\n options: UseDebounceOptions = {}\n): T {\n // Parse options\n const wait = delay || 0;\n const leading = options.leading ?? false;\n const trailing = options.trailing !== undefined ? options.trailing : true;\n const maxing = \"maxWait\" in options;\n const maxWait = maxing ? Math.max(options.maxWait || 0, wait) : undefined;\n\n const [debouncedValue, setDebouncedValue] = useState<T>(value);\n const timerIdRef = useRef<ReturnType<typeof setTimeout> | undefined>(\n undefined\n );\n const lastCallTimeRef = useRef<number | undefined>(undefined);\n const lastInvokeTimeRef = useRef<number>(0);\n const lastValueRef = useRef<T>(value);\n const prevValueRef = useRef<T>(value); // Track previous value to detect actual changes\n\n // Store options in refs to access latest values in timer callbacks\n const waitRef = useRef(wait);\n const leadingRef = useRef(leading);\n const trailingRef = useRef(trailing);\n const maxingRef = useRef(maxing);\n const maxWaitRef = useRef(maxWait);\n\n // Update refs when options change\n waitRef.current = wait;\n leadingRef.current = leading;\n trailingRef.current = trailing;\n maxingRef.current = maxing;\n maxWaitRef.current = maxWait;\n\n // Helper function to get current time\n const now = () => Date.now();\n\n // Define helper functions using refs for latest values\n const shouldInvokeRef = useRef<(time: number) => boolean>(() => false);\n const invokeRef = useRef<(time: number) => void>(() => {});\n const remainingWaitRef = useRef<(time: number) => number>(() => 0);\n const timerExpiredRef = useRef<() => void>(() => {});\n const trailingEdgeRef = useRef<(time: number) => void>(() => {});\n const leadingEdgeRef = useRef<(time: number) => void>(() => {});\n\n // Helper function: shouldInvoke\n shouldInvokeRef.current = (time: number): boolean => {\n const lastCallTime = lastCallTimeRef.current;\n if (lastCallTime === undefined) {\n return true; // First call\n }\n\n const timeSinceLastCall = time - lastCallTime;\n const timeSinceLastInvoke = time - lastInvokeTimeRef.current;\n\n return (\n timeSinceLastCall >= waitRef.current ||\n timeSinceLastCall < 0 || // System time went backwards\n (maxingRef.current &&\n timeSinceLastInvoke >= (maxWaitRef.current as number))\n );\n };\n\n // Helper function: invokeFunc\n invokeRef.current = (time: number): void => {\n setDebouncedValue(lastValueRef.current);\n lastInvokeTimeRef.current = time;\n };\n\n // Helper function: remainingWait\n remainingWaitRef.current = (time: number): number => {\n const lastCallTime = lastCallTimeRef.current;\n if (lastCallTime === undefined) {\n return waitRef.current;\n }\n\n const timeSinceLastCall = time - lastCallTime;\n const timeSinceLastInvoke = time - lastInvokeTimeRef.current;\n const timeWaiting = waitRef.current - timeSinceLastCall;\n\n return maxingRef.current\n ? Math.min(\n timeWaiting,\n (maxWaitRef.current as number) - timeSinceLastInvoke\n )\n : timeWaiting;\n };\n\n // Helper function: trailingEdge\n trailingEdgeRef.current = (time: number): void => {\n timerIdRef.current = undefined;\n\n // Only invoke if we have `lastValueRef.current` which means `value` has been\n // debounced at least once.\n if (trailingRef.current && lastCallTimeRef.current !== undefined) {\n invokeRef.current(time);\n }\n };\n\n // Helper function: timerExpired\n timerExpiredRef.current = (): void => {\n const time = now();\n if (shouldInvokeRef.current(time)) {\n trailingEdgeRef.current(time);\n } else {\n // Restart the timer.\n timerIdRef.current = setTimeout(\n () => timerExpiredRef.current(),\n remainingWaitRef.current(time)\n );\n }\n };\n\n // Helper function: leadingEdge\n leadingEdgeRef.current = (time: number): void => {\n // Reset any `maxWait` timer.\n lastInvokeTimeRef.current = time;\n // Start the timer for the trailing edge.\n timerIdRef.current = setTimeout(\n () => timerExpiredRef.current(),\n waitRef.current\n );\n // Invoke the leading edge.\n if (leadingRef.current) {\n invokeRef.current(time);\n }\n };\n\n // Cleanup on unmount only\n useEffect(() => {\n return () => {\n if (timerIdRef.current !== undefined) {\n clearTimeout(timerIdRef.current);\n }\n };\n }, []);\n\n // Main debounce effect - runs when value changes\n useEffect(() => {\n // Skip if value hasn't actually changed (prevents initial render from consuming leading edge)\n if (Object.is(prevValueRef.current, value)) {\n return;\n }\n prevValueRef.current = value;\n\n const time = now();\n const isInvoking = shouldInvokeRef.current(time);\n\n // Update lastValueRef with current value\n lastValueRef.current = value;\n lastCallTimeRef.current = time;\n\n if (isInvoking) {\n if (timerIdRef.current === undefined) {\n leadingEdgeRef.current(time);\n } else if (maxingRef.current) {\n // Handle invocations in a tight loop.\n clearTimeout(timerIdRef.current);\n timerIdRef.current = setTimeout(\n () => timerExpiredRef.current(),\n waitRef.current\n );\n invokeRef.current(time);\n }\n } else {\n if (timerIdRef.current === undefined) {\n // Start timer with wait\n // remainingWait is only used inside timerExpired for restarting\n timerIdRef.current = setTimeout(\n () => timerExpiredRef.current(),\n waitRef.current\n );\n }\n }\n // No cleanup here - timer should persist across value changes\n // This is the key difference from the previous implementation\n }, [value]);\n\n return debouncedValue;\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED