import './styles.scss'; import { ChangeEventHandler, useState, useMemo, useCallback } from 'react'; import debounce from 'lodash/debounce'; const sendBackendRequest = (value: string) => { console.log('Changed value:', value); }; const debouncedSendRequest = debounce(sendBackendRequest, 1000); const DebounceOutside = () => { const [value, setValue] = useState('initial'); const onChange: ChangeEventHandler = (e) => { const value = e.target.value; setValue(value); debouncedSendRequest(value); }; return ; }; const DebounceWithUseMemo = () => { const [value, setValue] = useState('initial'); const sendBackendRequest = useCallback((value: string) => { console.log('Changed value:', value); }, []); const debouncedSendRequest = useMemo(() => { return debounce(sendBackendRequest, 1000); }, [sendBackendRequest]); const onChange: ChangeEventHandler = (e) => { const value = e.target.value; setValue(value); debouncedSendRequest(value); }; return ; }; export default function App() { return (

Controlled components with fixed debouncing

Open console and type something in inputs

Debounced outside

Just works!

Debounced with useMemo

Equally works

); }

Chapter 11. Example 3