import React, { useState, useEffect } from "react";
 
const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);
 
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
 
    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);
 
  return debouncedValue;
};
 
export default function App() {
  const [inputValue, setInputValue] = useState("");
  const debouncedInputValue = useDebounce(inputValue, 500);
 
  const handleChange = (event) => {
    setInputValue(event.target.value);
  };
 
  return (
    <div className="App">
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Debounced Value: {debouncedInputValue}</p>
    </div>
  );
}