useEffect infinite loop when fetching from the api

Question

I'm trying to fetch some data from the API, but doesn't matter which dependencies I use, useEffect still keeps making an infinite loop, is there something wrong in the code or why it keeps doing that?

function HomePage() {
    const [Carousels, setCarousels] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        const getCarousels = async () => {
            setLoading(true);
            const genres = ["BestRated", "Newest"];
            for (const genre of genres) {
                try {
                    const res = await axios.get(`http://localhost:4000/api/carousels/` + genre);
                    console.log(res.data);
                    setCarousels([...Carousels, res.data]);
                } catch (err) {
                    console.log(err);
                }
            }
            setLoading(false);
        }
        getCarousels();
    }, [Carousels]);
    return (
        <div className='Home'>
            <NavBar />
            <HeroCard />
            {!loading && Carousels.map((carousel) => (
                <Carousel key={carousel._id} carousel={carousel} />
            ))}
            <Footer />
        </div>
    );
}

Answer 1

useEffect in your code updates Carousels each run. It sees the updated value and runs again. You could fix it various ways, the easiest would be to add [fetched, setFetched] = useState(false); and use it in your useEffect to check before fetching from the API