Discussion on: Throttling and Debouncing in ReactJS

import React from "react";

expprt const useThrottledCallback = (delay, dependencies, callback) => {
  const [timeoutIdentifier, setTimeoutIdentifier] = React.useState(null);

  return React.useCallback((...parameters) => {
    if (timeoutIdentifier !== null) {
      window.clearTimeout(timeoutIdentifier);
    }

    setTimeoutIdentifier(window.setTimeout(() => {
      setTimeoutIdentifier(null);
      callback(...parameters);
    }, delay));
  }, dependencies);
};

import {useThrottledCallback} from "./hooks/throttling";
import React from "react";

export const App = () => {
  const [search, setSearch] = React.useState("");
  const [result, setResult] = React.useState([]);

  const fetchResult = useThrottledCallback(1500, [search, setResult], () => {
    window.fetch(`https://jsonplaceholder.typicode.com/${search}`).then(response => {
      return response.json();
    }).then(newResult => {
      setResult(newResult);
    }).catch(() => {
      setResult([]);
    });
  });

  const onSearch = React.useCallback(event => {
    setSearch(event.target.value);
  }, [setSearch]);

  React.useEffect(() => {
    fetchResult();
  }, [search]);

  return (
    <div>
      <div>
        <label htmlFor="search">JSONPlaceholders endpoint</label>
        <input id="search" type="text" onInput={onSearch} value={search} />
      </div>
      <pre><code>{JSON.stringify(result, null, 2)}</code></pre>
    </div>
  );
};