Ya visité este enlace y traté de seguir algunos ejemplos: Realizar debounce en React.js

Un poco de contexto : estoy creando un cuadro de búsqueda que quiero implementar en NPM. Cada vez que el usuario escribe, se llama a una función prop onSearch . Esto permite a los programadores obtener nuevos datos si lo desean.

El problema: cada carácter escrito se activará en Search, pero eso no es óptimo, por lo que quiero eliminarlo.

Quería hacer lo que sugiere una de las publicaciones:

 import React, { useCallback } from "react"; import { debounce } from "lodash"; const handler = useCallback(debounce(someFunction, 2000), []); const onChange = (event) ={amp}gt; { // perform any event related action here handler(); }; 

Mi problema es que necesito pasar un argumento a «someFunction», y ese argumento es un estado (una cadena):

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

Después de varios intentos, finalmente encontré una solución. Recordando cómo eliminé el evento de cambio de tamaño de la ventana en el pasado, seguí más o menos el mismo patrón. Lo hice adjuntando un detector de eventos al objeto de ventana y agregando una propiedad al evento al despacharlo. Funciona, pero ¿es una buena solución? ¿Hay una mejor manera de lograr esto?

  React.useEffect( ()={amp}gt; { // 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(() ={amp}gt; onSearch(keyword, isCached("search-keyword-"   keyword)), inputDebounce); // This function sets the keyword and calls debounceDispatchToParent const eventListenerFunction = (e) ={amp}gt; { // 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 ()={amp}gt; window.removeEventListener("dispacthToParent", eventListenerFunction); }, []); 

Luego, cada vez que el usuario escribe, llamo handleSetSearchString:

  const handleSetSearchString = keyword ={amp}gt; { keyword = keyword.toLowerCase(); // If the string is longer than the minimum characters required to trigger a filter/search if (keyword.length {amp}gt; 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); }; 

Dado que tanto debounce como useCallback devuelven una función, puede pasarla directamente.

 const handler = useCallback(debounce(someFunction, 2000), []); const onChange = (event) ={amp}gt; { // perform any event related action here handler(argument1, argument2, ...args); }; 
Jose felix

es un nuevo contribuyente a este sitio. Tenga cuidado al pedir aclaraciones, comentarios y respuestas. Mira nuestro

Código de Conducta

.