What are some examples of debouncing in React?

What are some examples of debouncing in React?

Debouncing in React is a technique used to limit the rate at which a function is executed. For example, when handling input events, you can debounce the function that processes the input to avoid excessive calls.

Can you show me a code example?

Sure! Here's a simple example using a search input:

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

const SearchComponent = () => {
  const [query, setQuery] = useState('');

  const handleSearch = debounce((value) => {
    console.log('Searching for:', value);
  }, 300);

  useEffect(() => {
    handleSearch(query);
  }, [query]);

  return (
    <input
      type="text"
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search..."
    />
  );
};

This code debounces the search function to only execute after 300 milliseconds of inactivity.

What if I want to debounce a button click instead?

You can debounce a button click in a similar way. Just wrap the click handler with a debounce function. Here's an example:

const handleClick = debounce(() => {
  console.log('Button clicked!');
}, 500);

<button onClick={handleClick}>Click Me</button>