useDebounce Hook 🚀

I'll tell you about the use of Debounce Function as useDebounce Hook in React, which positively affects search request performance and which I also use frequently.

Firstly, let's create a react project in a simple way with the following command lines.

npx create-react-app my-app

Then you can create and use useDebounce as in the code blocks below.

useDebounce.js

import { useState, useEffect } from "react";

const useDebounce = (val, delay) => {
    const [ debounceVal, setDebounceVal ] = useState(val);

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebounceVal(val);
        }, delay);

        return () => {
            clearTimeout(handler);
        }
    }, [val]);

    return debounceVal;
}

export default useDebounce;

App.js

import { useState, useEffect } from "react";
import useDebounce from "./useDebounce";

const DATA_LIST = [
  "Luke Skywalker",
  "C-3PO",
  "R2-D2",
  "Darth Vader",
  "Leia Organa",
  "Owen Lars",
  "Beru Whitesun lars",
  "R5-D4",
  "Biggs Darklighter",
  "Obi-Wan Kenobi",
];

function App() {
  const [results, setResults] = useState([]);
  const [text, setText] = useState("");

  const debounce = useDebounce(text, 500);

  useEffect(() => {
    const data = DATA_LIST.filter((el) => el.toLowerCase().includes(debounce));
    setResults(data);
  }, [debounce]);

  return (
    <div className="app">
      <h1>search</h1>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <div className="search-result">
        {results.length > 0 ? (
          results.map((item, i) => (
            <div key={i} className="result-item">
              {item}
            </div>
          ))
        ) : (
          <p>No Result</p>
        )}
      </div>
    </div>
  );
}

export default App;

You can also review this example from my github repo: https://github.com/cagatay-unal/useDebounce-hook