https://github.com/sevenoutman/use-debounced-memo

React hook for debouncing state changes.
https://github.com/sevenoutman/use-debounced-memo

debounce react react-hooks react-state

Last synced: 6 days ago
JSON representation

React hook for debouncing state changes.

• Host: GitHub
• URL: https://github.com/sevenoutman/use-debounced-memo
• Owner: SevenOutman
• License: mit
• Created: 2019-11-05T10:59:43.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-11-05T12:02:15.000Z (over 6 years ago)
• Last Synced: 2025-02-09T11:46:14.439Z (over 1 year ago)
• Topics: debounce, react, react-hooks, react-state
• Language: TypeScript
• Homepage:
• Size: 5.86 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# useDebouncedMemo

> Debounced useMemo().

    yarn add @sevenoutman/use-debounced-memo

## Usage

A common use case is requesting data according to a search input. The controlled `` updates right as you types, while `searchTodos()` is debounced to 300ms.

```jsx

import useDebouncedMemo from '@sevenoutman/use-debounced-memo';

function App() {

    

    const [todos, setTodos] = useState([]);

    const [search, setSearch] = useState();

    const searchTodos = useCallback(async (searchWord) => {

        const result = await requestTodos(searchWord);

        setTodos(result);

    }, []);

    const debouncedSearch = useDebouncedMemo(() => {

        return search;

    }, [search], 300);

    useEffect(() => {

        searchTodos(debouncedSearch);

    }, [debouncedSearch]);

    return (

        <>

            

            

        >

    );

}

```