How do I implement debouncing for input in React?

How do I implement debouncing for input in React?

To implement debouncing in React, you can use the useEffect hook along with a timeout to delay the input processing.

Can you show me a code example?

Sure! Here's a simple example:

import React, { useState, useEffect } from 'react';

const DebouncedInput = () => {
  const [inputValue, setInputValue] = useState('');
  const [debouncedValue, setDebouncedValue] = useState(inputValue);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(inputValue);
    }, 300);

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

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

This will update the debounced value 300ms after the user stops typing.

What if I want to change the debounce time?

You can easily change the debounce time by modifying the value in the setTimeout function. Just replace 300 with your desired delay in milliseconds.