How can I implement debouncing in my React application?

How can I implement debouncing in my React application?

You can implement debouncing in React using the useEffect and setTimeout hooks. Would you like a code example?

Yes, please provide a code example.

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 (
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
  );
};

This will update debouncedValue only after 300ms of inactivity.

What if I want to debounce a function instead of an input?

You can use a similar approach with a function. You can create a debounced version of your function using lodash.debounce or implement it manually. Would you like to see both methods?