Skip to content

Commit b309415

Browse files
committed
add throttle example to README.md
1 parent b69a378 commit b309415

File tree

1 file changed

+21
-2
lines changed

1 file changed

+21
-2
lines changed

README.md

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,34 @@ function MyComponent(props) {
6464
```
6565

6666

67-
### **With Debouncing**
67+
### **With Throttling**
68+
69+
If passed `options.throttleTimeout`, or options are entered as a `Number`, dimension changes
70+
are registered on a throttled basis e.g. with a maximum frequency.
6871

69-
If passed `options.debounceTimeout`, or options are entered as a `Number`, it registers dimension changes only when a user stops dragging/resizing the window for a specified number of miliseconds. This is useful for listening to expensive components such as data grids which may be too
72+
This is useful for listening to expensive components such as data grids which may be too
7073
expensive to re-render during window resize dragging.
7174

7275
```js
7376
import React from 'react';
7477
import useViewportSizes from 'use-viewport-sizes';
7578

79+
function MyExpensivelyRenderedComponent(props) {
80+
const [vpWidth, vpHeight] = useViewportSizes({ throttleTimeout: 1000 }); // 1s throttle
81+
82+
// ...renderLogic
83+
}
84+
```
85+
86+
### **With Debouncing**
87+
88+
If passed `options.debounceTimeout`, dimension changes are registered only when a user stops dragging/resizing the window for a specified number of miliseconds. This is an alternative behavior to `throttleTimeout` where it may be less
89+
important to update viewport the entire way that a user is resizing.
90+
91+
```js
92+
import React from 'react';
93+
import useViewportSizes from 'use-viewport-sizes';
94+
7695
function MyExpensivelyRenderedComponent(props) {
7796
const [vpWidth, vpHeight] = useViewportSizes({ debounceTimeout: 1000 }); // 1s debounce
7897

0 commit comments

Comments
 (0)