diff --git a/README.md b/README.md
index 7a6806d..a3ecd14 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,10 @@ https://codesandbox.io/s/kx75xzyrq7
More complex example with searching for matching countries using debounced input: https://codesandbox.io/s/rr40wnropq (thanks to https://twitter.com/ZephDavies)
+## Changelog
+
+https://github.com/xnimorz/use-debounce/blob/master/CHANGELOG.md
+
## Simple values debouncing
According to https://twitter.com/dan_abramov/status/1060729512227467264
@@ -65,7 +69,7 @@ import { useDebouncedCallback } from 'use-debounce';
function Input({ defaultValue }) {
const [value, setValue] = useState(defaultValue);
// Debounce callback
- const [debouncedCallback] = useDebouncedCallback(
+ const debounced = useDebouncedCallback(
// function
(value) => {
setValue(value);
@@ -74,10 +78,10 @@ function Input({ defaultValue }) {
1000
);
- // you should use `e => debouncedCallback(e.target.value)` as react works with synthetic evens
+ // you should use `e => debounced.callback(e.target.value)` as react works with synthetic evens
return (
);
}
@@ -161,16 +165,16 @@ const rootElement = document.getElementById('root');
ReactDOM.render(, rootElement);
```
-#### callPending method
+#### Flush method
-`useDebouncedCallback` has `callPending` method. It allows to call the callback manually if it hasn't fired yet. This method is handy to use when the user takes an action that would cause the component to unmount, but you need to execute the callback.
+`useDebouncedCallback` has `flush` method. It allows to call the callback manually if it hasn't fired yet. This method is handy to use when the user takes an action that would cause the component to unmount, but you need to execute the callback.
```javascript
import React, { useState, useCallback } from 'react';
import { useDebouncedCallback } from 'use-debounce';
function InputWhichFetchesSomeData({ defaultValue, asyncFetchData }) {
- const [debouncedFunction, cancel, callPending] = useDebouncedCallback(
+ const debounced = useDebouncedCallback(
(value) => {
asyncFetchData;
},
@@ -181,12 +185,12 @@ function InputWhichFetchesSomeData({ defaultValue, asyncFetchData }) {
// When the component goes to be unmounted, we will fetch data if the input has changed.
useEffect(
() => () => {
- callPending();
+ debounced.flush();
},
- [callPending]
+ [debounced]
);
- return debouncedFunction(e.target.value)} />;
+ return debounced.callback(e.target.value)} />;
}
```
diff --git a/package.json b/package.json
index 99a6a5d..b5c8b58 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "use-debounce",
- "version": "4.0.0",
+ "version": "5.0.0-beta",
"description": "Debounce hook for react",
"main": "lib/index.js",
"module": "esm/index.js",