after fetch, my website data always reloading. so search function does not work

Question

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.png

Answer 1

You are calling the api again and again after making change in your state ,as useEffect is called as an sideEffect after every state change ,so it creates an infinite loop

useEffect(() => {
        fetch('http://localhost:5000/products')
            .then(res => res.json())
            .then(data => {
                setProducts(data)
                setDisplayProduct(data)
                console.log(data);
            })
    },[])

Pass an empty array in the useEffect.It will call the useEffect only once when your page loads for the first time

See this answer -React Hooks - 0 vs. empty array as second argument in useEffect