Estoy creando un motor de búsqueda usando una entrada y un botón que espero ejecute la búsqueda, pero cuando solo ingreso una letra en la entrada que establece el valor de búsqueda de useState, mi useEffect se ejecuta aunque la búsqueda no se encuentra en la dependencia useEffect formación.

Aporte:

 <div className="flex gap-1"> <input className="border-1 border-2 border-solid rounded border-slate-300" value={search} onChange={(e) => setSearch(e.target.value)} /> <button onClick={() => handleSearch()} <FiSearch/></button> </div>

manejarSearch()

 const handleSearch = async () => { setLimitPage(10) setPage(1) await getProducts(limitPage, page, search) }

mi useEffect que se ejecuta sin que se espere de esa manera tan pronto como cambia la búsqueda

 useEffect (() => { // eslint-disable-next-line getProducts(limitPage, page, search) setTotalDocs(products.products?.totalDocs) setTotalPages(products.products?.totalPages) setCurrentPage(products.products?.page) setNextPage(products.products?.hasNextPage) setPreviousPage(products.products?.hasPrevPage) const totalPages = Math.ceil(totalDocs/limitPage) const links = [] for (let i = 1; i <= totalPages; i++) { links[i] = i } setNumbers(links) }, [products, limitPage, page ])

No entiendo cómo puedo evitar esto para poder usar mi función de búsqueda antes de que se ejecute useEffect