const [products, setProducts] = useState([]); const [displayProduct, setDisplayProduct] = useState([]) useEffect(() => { fetch('http://localhost:5000/products') .then(res => res.json()) .then(data => { setProducts(data) setDisplayProduct(data) console.log(data); }) }) const handleSearch = (e) => { const searchText = e.target.value; const matchedProduct = products?.filter((data) => data.name.toLowerCase().includes(searchText?.toLowerCase()) ); setDisplayProduct(matchedProduct); console.log(searchText); console.log(matchedProduct); }; console.log(products);[here you can see always increasing ][1] [1]: https://i.stack.imgur.com/FOeaM.pngEstá llamando a la API una y otra vez después de realizar cambios en su estado, ya que useEffect se llama como un efecto secundario después de cada cambio de estado, por lo que crea un bucle infinito
useEffect(() => { fetch('http://localhost:5000/products') .then(res => res.json()) .then(data => { setProducts(data) setDisplayProduct(data) console.log(data); }) },[]) Pase una matriz vacía en useEffect . Llamará a useEffect solo una vez cuando su página se cargue por primera vez
Vea esta respuesta - React Hooks - 0 vs. matriz vacía como segundo argumento en useEffect