useDebounce Hook

A custom React hook for debouncing values to prevent unnecessary renders.

import { useEffect, useState } from "react";


import useDebounce from "./useDebounce";
import { useState, useEffect } from "react";

export default function App() {
  const [input, setInput] = useState("");
  const debouncedValue = useDebounce(input, 500);

  useEffect(() => {
    console.log("Debounced Value:", debouncedValue);
  }, [debouncedValue]);

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Type something..."
      />
      <p>Debounced Value: {debouncedValue}</p>
    </div>
  );
}

import { useEffect, useState } from "react";

function useDebounce<T>(value: T, delay: number = 500): T {
    const [debouncedValue, setDebouncedValue] = useState<T>(value);

    useEffect(() => {
        const timer = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        return () => {
            clearTimeout(timer);
        };
    }, [value, delay]);

    return debouncedValue;
}

export default useDebounce;