Perform debounce in React.js

Question

How do you perform debounce in React.js?

I want to debounce the handleOnChange.

I tried with debounce(this.handleOnChange, 200) but it doesn\'t

Answer 1

My solution is hooks based (written in Typescript).

I've got 2 main hooks useDebouncedValue and useDebouncedCallback

First - useDebouncedValue

Let's say we've got a search box, but we want to ask the server for search results after the user has stopped typing for 0,5s

function SearchInput() {
  const [realTimeValue, setRealTimeValue] = useState('');

  const debouncedValue = useDebouncedValue(realTimeValue, 500); // this value will pick real time value, but will change it's result only when it's seattled for 500ms

  useEffect(() => {
    // this effect will be called on seattled values
    api.fetchSearchResults(debouncedValue);
  }, [debouncedValue])

  return  setRealTimeValue(event.target.value)} />
}

Implementation

import { useState, useEffect } from "react";

export function useDebouncedValue(input: T, time = 500) {
  const [debouncedValue, setDebouncedValue] = useState(input);

  // every time input value has changed - set interval before it's actually commited
  useEffect(() => {
    const timeout = setTimeout(() => {
      setDebouncedValue(input);
    }, time);

    return () => {
      clearTimeout(timeout);
    };
  }, [input, time]);

  return debouncedValue;
}

Second useDebouncedCallback

It just creates a 'debounced' function in the scope of your component.

Let's say we've got a component with a button that will show alert 500ms after you stopped clicking it.

function AlertButton() {
  function showAlert() {
    alert('Clicking has seattled');
  }

  const debouncedShowAlert = useDebouncedCallback(showAlert, 500);

  return Click
}

Implementation (note I'm using lodash/debounce as a helper)

import debounce from 'lodash/debounce';
import { useMemo } from 'react';

export function useDebouncedCallback any>(callback: T, wait?: number) {
  const debouncedCallback = useMemo(() => debounce(callback, wait), [callback, wait]);

  return debouncedCallback;
}