import './styles.css'; import { useState, useMemo, useRef, useEffect } from 'react'; import debounce from 'lodash/debounce'; const DebounceWithStateAndRef = () => { const [value, setValue] = useState('initial'); const ref = useRef(); const onChange = () => { console.log('State value:', value); }; useEffect(() => { ref.current = onChange; }, [onChange]); const debouncedCallback = useMemo(() => { const func = () => { ref.current?.(); }; return debounce(func, 1000); }, []); return ( { debouncedCallback(); setValue(e.target.value); }} value={value} /> ); }; const useDebounce = (callback: () => void) => { const ref = useRef(); useEffect(() => { ref.current = callback; }, [callback]); const debouncedCallback = useMemo(() => { const func = () => { ref.current?.(); }; return debounce(func, 1000); }, []); return debouncedCallback; }; const DebounceWithUseCallbackAndState = () => { const [value, setValue] = useState('initial'); const onChange = () => { console.log('State value:', value); }; const debouncedOnChange = useDebounce(onChange); return ( { debouncedOnChange(); setValue(e.target.value); }} value={value} /> ); }; export default function App() { return (

Final working debounce with ref

Open console and type something in inputs

Debounce with state and ref

Works like a charm!

Extracted into a hook

Still works!

); }