What is debouncing in React and how can I implement it?

What is debouncing in React and how can I implement it?

Debouncing is a technique used to limit the rate at which a function is executed. In React, it's often used to optimize performance by reducing the number of times an input handler is called as the user types.

Can you show me a code example of how to implement debouncing?

Sure! You can use the useEffect and setTimeout hooks. 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 only after 300ms of inactivity.

What are some common use cases for debouncing?

Common use cases include search inputs, window resizing events, and form validation, where you want to limit the number of function calls.