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 (
- debouncedCallback(e.target.value)} /> + debounced.callback(e.target.value)} />

Debounced value: {value}

); @@ -95,7 +99,7 @@ function ScrolledComponent() { const [position, setPosition] = useState(window.pageYOffset); // Debounce callback - const [scrollHandler] = useDebouncedCallback( + const debounced = useDebouncedCallback( // function () => { setPosition(window.pageYOffset); @@ -105,7 +109,7 @@ function ScrolledComponent() { ); useEffect(() => { - const unsubscribe = subscribe(window, 'scroll', scrollHandler); + const unsubscribe = subscribe(window, 'scroll', debounced.callback); return () => { unsubscribe(); }; @@ -138,7 +142,7 @@ import { useDebouncedCallback } from 'use-debounce'; function Input({ defaultValue }) { const [value, setValue] = useState(defaultValue); - const [debouncedFunction, cancel] = useDebouncedCallback( + const debounced = useDebouncedCallback( (value) => { setValue(value); }, @@ -147,12 +151,12 @@ function Input({ defaultValue }) { { maxWait: 2000 } ); - // you should use `e => debouncedFunction(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 (
- debouncedFunction(e.target.value)} /> + debounced.callback(e.target.value)} />

Debounced value: {value}

- +
); } @@ -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",