Example Debounce Function with useRef and useEffect

App.jsx

import React, { useEffect, useRef, useState } from 'react';
import { debounce } from 'throttle-debounce';

const DEBOUNCE_MS = 200;

export default () => {
  const [value, setValue] = useState('');
  const [finalValue, setFinalValue] = useState('');

  // we use `useRef` so that we don't redefine the function on every update
  // and in turn erase the debounce functionality.
  const setValueDebounced = useRef(
    debounce(DEBOUNCE_MS, setFinalValue)
  );

  // set the search term using `debounce` which introduces an intentional delay
  // - hence the side-effect.
  useEffect(() => {
    setValueDebounced.current(value);
  }, [value]);
  
  // just an example
  return (
    <input
      onChange={(event) => setValue(event.currentTarget.value)}
      value={finalValue}
    />
  );
};