Skip to content

Commit

Permalink
Fix example for throttled onResize function
Browse files Browse the repository at this point in the history
  • Loading branch information
jhrtn authored Oct 5, 2021
1 parent fba5d6e commit e15325d
Showing 1 changed file with 9 additions and 4 deletions.
13 changes: 9 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -184,15 +184,20 @@ const App = () => {
## Performance Optimization
The `onResize` event will be triggered whenever the size of the target element is changed. We can reduce the frequency of the event callback by activating the [responsive mode](#responsive-components) or implementing our own throttled/debounced function as below.
The `onResize` event will be triggered whenever the size of the target element is changed. We can reduce the frequency of the event callback by activating the [responsive mode](#responsive-components) or implementing our own throttled/debounced function as below. Note that in order to throttle/debounce the function correctly, it will need to be memoised else it will be recreated on every render call.
```js
import _ from "lodash";
import { useMemo } from 'react';

const returnObj = useDimensions({
onResize: _.throttle(() => {
// Triggered once per every 500 milliseconds
}, 500),
onResize: useMemo(
() =>
_.throttle(() => {
// Triggered once per every 500 milliseconds
}, 500),
[]
),
});
```
Expand Down

0 comments on commit e15325d

Please sign in to comment.