useDebounce for input and update search (real time search)

import { useEffect, useState } from "react";

const useDebounce = (initialValue = "", delay) => {

  const [actualValue, setActualValue] = useState(initialValue);

  const [debounceValue, setDebounceValue] = useState(initialValue);

  useEffect(() => {

    const debounceId = setTimeout(() => setDebounceValue(actualValue), delay);

    return () => clearTimeout(debounceId);

  }, [actualValue, delay]);

  return [debounceValue, setActualValue];

};

----------------------------

Defined return () => { /*code/* }  runs on component unmount 

React does so by "mounting" (adding nodes to the DOM), "unmounting" (removing them from the DOM)

Usage:

const [debouncedSearchStr, setDebouncedSearchStr] = useDebounce('', 500);