How to use the use-debounce.useDebouncedCallback function in use-debounce

function useWnResize(ref = false, delay = 500) {
  const [windowSize, setWindowSize] = useState(null)

  const getSize = useCallback(() => {
    // Setting state to the updated matches
    setWindowSize({
      width: ref === false ? window.innerWidth : ref.current.offsetWidth,
      height: ref === false ? window.innerHeight : ref.current.offsetHeight,
    })
  }, [ref])

  const [resizeHandler] = useDebouncedCallback(() => {
    getSize()
  }, delay)

  useEffect(() => {
    if (!isSSR) {
      // Add listener
      window.addEventListener("resize", resizeHandler)
      getSize()
    }

    return () => {
      // Remove listener
      !isSSR && window.removeEventListener("resize", resizeHandler)
    }
  }, [resizeHandler, ref, getSize])

export default function useSearchResults(fetch, { initialResults = null, debounceTimeout = 200 } = {}) {
  const [result, setResult] = useState(initialResults);
  const [isLoading, setIsLoading] = useState(false);
  const currentSearchTerm = useRef(null);
  const isDestroyed = useRef(false);

  const [doSearch] = useDebouncedCallback(searchTerm => {
    setIsLoading(true);
    currentSearchTerm.current = searchTerm;
    fetch(searchTerm)
      .catch(() => null)
      .then(data => {
        if (searchTerm === currentSearchTerm.current && !isDestroyed.current) {
          setResult(data);
          setIsLoading(false);
        }
      });
  }, debounceTimeout);

  useEffect(
    () =>
      // ignore all requests after component destruction
      () => {

function useMQResize(queries) {
  const [queryMatch, setQueryMatch] = useState(null)
  const keys = useRef(Object.keys(queries))

  const handleQuery = useCallback(() => {
    const updatedMatches = keys.current.reduce((acum, media) => {
      acum[media] = !!window.matchMedia(queries[media]).matches
      return acum
    }, {})

    // Setting state to the updated matches
    setQueryMatch(updatedMatches)
  }, [queries])

  const [resizeHandler] = useDebouncedCallback(
    () => {
      handleQuery()
    },
    // Delay
    500
  )

  useEffect(() => {
    if (!isSSR && window.matchMedia) {
      // Add listener
      window.addEventListener("resize", resizeHandler)
      handleQuery()
    }

    return () => {
      // Remove listener

export default function AutoSavingInput({ value, onChange, InputElement, timeout }: IProps) {
  const Input = InputElement || Form.TextArea;
  const [localValue, setLocalValue] = useState(value);
  const save = useDebouncedCallback((newValue) => onChange(newValue), timeout, []);

  const onInputChange = (e: React.KeyboardEvent) => {
    const newValue = e.currentTarget.value;

    if (localValue === newValue) {
      return;
    }

    setLocalValue(newValue);
    save(newValue);
  };

  const onFormSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    onChange(localValue);

if (chatId === 0) return
    if (isChatIdInView(chatId)) {
      log.debug(`useLazyChatListItems: chat with id ${chatId} changed, it's in view therefore refetching`)
      const chats = await fetchChats([chatId], true)
      setChatItems(chatItems => { return { ...chatItems, ...chats } })
    } else {
      log.debug(`useLazyChatListItems: chat with id ${chatId} changed, it's NOT in view, unsetting if needed`)
      setChatItems(chatItems => {
        if (typeof chatItems[chatId] !== 'undefined') return { ...chatItems, [chatId]: undefined }
        return chatItems
      }
      )
    }
  }

  const [onChatListScroll] = useDebouncedCallback(() => {
    fetchChatsInView(20)
  }, 50)

  const onChatListItemChanged = (event, { chatId }) => {
    if (chatId === 0) {
      updateChatsInViewUnsetOthers()
    } else {
      refetchChatIfInViewUnsetOtherwise(chatId)
    }
  }

  const onResize = () => fetchChatsInView()

  useLayoutEffect(() => {
    window.addEventListener('resize', onResize)
    return () => window.removeEventListener('resize', onResize)

export default function AppearanceSettings({ options, onOptionsChange }) {
  const [onOptionsChangeDebounced] = useDebouncedCallback(onOptionsChange, 200);

  return (
    
      <section>
        <input label="{(<React.Fragment">Number Values Format)}
          className="w-100"
          data-test="Funnel.NumberFormat"
          defaultValue={options.numberFormat}
          onChange={event =&gt; onOptionsChangeDebounced({ numberFormat: event.target.value })}
        /&gt;
      </section>

      <section>
        </section>

export default function ColorsSettings({ options, onOptionsChange }) {
  const [onOptionsChangeDebounced] = useDebouncedCallback(onOptionsChange, 200);

  return (
    
      <section>
        <select data-test="Choropleth.Editor.ClusteringMode" label="Clustering mode"> onOptionsChange({ clusteringMode })}
        &gt;
          quantile
          equidistant
          k-means
        </select></section>

export default function SchemaBrowser({ schema, onRefresh, onItemSelect, ...props }) {
  const [filterString, setFilterString] = useState("");
  const filteredSchema = useMemo(() => applyFilter(schema, filterString), [schema, filterString]);
  const [expandedFlags, setExpandedFlags] = useState({});
  const [handleFilterChange] = useDebouncedCallback(setFilterString, 500);
  const [listRef, setListRef] = useState(null);

  useEffect(() => {
    setExpandedFlags({});
  }, [schema]);

  useEffect(() => {
    if (listRef) {
      listRef.recomputeRowHeights();
    }
  }, [listRef, filteredSchema, expandedFlags]);

  if (schema.length === 0) {
    return null;
  }