How to use the useDebounce hook for debouncing user input in Next.js

In Next.js, you can use the useDebounce hook to debounce user input. Debouncing is a technique used to delay the execution of a function until after a certain amount of time has passed since the last time the function was invoked. This is particularly useful when dealing with user input, such as in search bars, to avoid making too many requests or updates in a short amount of time.

Here's an example of how you can implement and use the useDebounce hook in Next.js:

1. Install the use-debounce library:

   bashCopy code
   npm install use-debounce
   

2. Create a custom hook for debouncing:

   jsxCopy code
   // utils/useDebounce.js
   
   import { useEffect, useState } from 'react';
   import useDebounce from 'use-debounce';
   
   const useDebouncedValue = (value, delay) => {
     const [debouncedValue, setDebouncedValue] = useState(value);
     const [debounced] = useDebounce(value, delay);
   
     useEffect(() => {
       setDebouncedValue(debounced);
     }, [debounced]);
   
     return debouncedValue;
   };
   
   export default useDebouncedValue;
   

3. Use the custom hook in your Next.js component:

   jsxCopy code
   // pages/index.js
   
   import { useState } from 'react';
   import useDebouncedValue from '../utils/useDebounce';
   
   const Home = () => {
     const [searchTerm, setSearchTerm] = useState('');
     const debouncedSearchTerm = useDebouncedValue(searchTerm, 500); // 500ms delay
   
     // Perform your search or any action with debouncedSearchTerm
   
     return (
       <div>
         <input
           type="text"
           placeholder="Search..."
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
         />
         <p>Debounced value: {debouncedSearchTerm}</p>
       </div>
     );
   };
   
   export default Home;
   

In this example, the useDebouncedValue hook takes the current input value and a delay as parameters. It returns a debounced value that updates only after the specified delay has passed since the last input change. You can adjust the delay based on your specific use case.