Create useDebounce hook

page.tsx

const [value, setValue] = useState('');
const debouncedValue = useDebounce(value, 500);
const [users, setUsers] = useState<User[]>([]);

const searchUsers = async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    const data: User[] = await res.json();

    const filteredData = data.filter((user) => {
      return user.name.toLowerCase().includes(value.toLowerCase());
    });
    setUsers(filteredData);
};

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

useEffect(() => {
  searchUsers();
}, [debouncedValue, searchUsers]);


 <input
        type='text'
        placeholder='Search users'
        className='border border-gray-300 rounded-md px-4 py-2 mt-4 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent'
        onChange={handleChange}
      />

      <div className='mt-4'>
        <button
          className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'
          onClick={searchUsers}
        >
          Search
        </button>
        <ul className='list-disc'>
          {users.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      </div>

useDebounce.tsx

'use client';
import { FC, useEffect, useState } from 'react';


const useDebounce = (value: any , delay = 500) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

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

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

  return debouncedValue;
};

export default useDebounce;