ReactJS: противодействовать функции, которая имеет в качестве аргумента значение состояния; как лучше всего это сделать?

Question

Я уже заходил по этой ссылке и пытался следовать нескольким примерам: Выполнить дебаунс в React.js

Немного контекста: я создаю окно поиска, которое хочу развернуть в NPM. Каждый раз, когда пользователь печатает, функция proponSearchназывается. Это позволяет программистам при желании получать новые данные.

Проблема: каждый набранный символ запускает onSearch, но это не оптимально, поэтому я хочу отменить это.

Я хотел сделать так, как предлагает один из постов:

import React, { useCallback } from "react";
import { debounce } from "lodash";

const handler = useCallback(debounce(someFunction, 2000), []);

const onChange = (event) => {
    // perform any event related action here

    handler();
 };

Моя проблема в том, что мне нужно передать аргумент "someFunction", и этот аргумент является состоянием (строкой):

const [searchString, setSearchString] = React.useState("");

После различных попыток я наконец нашел решение. Вспоминая, как в прошлом я отклонял событие изменения размера окна, я следовал более или менее той же схеме. Я сделал это, прикрепив прослушиватель событий к объекту окна и добавив свойство к событию при его отправке. Это работает, но хорошее ли это решение? Есть ли лучший способ добиться этого?

  React.useEffect( ()=> {

    // This will contain the keyword searched when the event is dispatched (the value is stored in event.keyword)
    // the only function dispatching the event is handleSetSearchString
    // It's declared at this level so that it can be accessed from debounceDispatchToParent
    let keyword = "";

    // This function contains the onSearch function that will be debounced, inputDebounce is 200ms
    const debounceDispatchToParent = debounce(() =>
      onSearch(keyword,  isCached("search-keyword-" + keyword)), inputDebounce);

    // This function sets the keyword and calls debounceDispatchToParent
    const eventListenerFunction = (e) => {
      // the event has a property attached that contains the keyword
      // store that value in keyword
      keyword = e.keyword;
      // call the function that will debounce onSearch
      debounceDispatchToParent();
    }

    // Add the listener to the window object
    window.addEventListener("dispatchToParent", eventListenerFunction, false);

    // Clean up
    return ()=> window.removeEventListener("dispacthToParent", eventListenerFunction);
  }, []);

Затем каждый раз, когда пользователь вводит, я вызываю handleSetSearchString:

  const handleSetSearchString = keyword => {

    keyword = keyword.toLowerCase();
    // If the string is longer than the minimum characters required to trigger a filter/search
    if (keyword.length > minChars) {
      // Here I create the event that contains the keyword
      const event = new Event("dispatchToParent");
      event.keyword = keyword;
      window.dispatchEvent(event);

    } else if (keyword.length === 0) {
      // If the string is empty clear the results
      setFilteredItems([]);
    }
    setSearchString(keyword);

  };

Answer 1

Поскольку оба debounce а также useCallback вернуть функцию, которую вы могли бы просто передать напрямую.

const handler = useCallback(debounce(someFunction, 2000), []);

const onChange = (event) => {
   // perform any event related action here

   handler(argument1, argument2, ...args);
};