Using useEffect to fetch data on route change causes infinite re-renders in Next.js
I'm trying to figure out I'm experiencing an infinite re-render scenario in my Next.js app when trying to fetch data based on a route change using the `useEffect` hook. I set up a function to fetch data from an API every time the route changes, but it seems like the state update triggers a re-render that calls the data fetch again and again. Here’s the relevant part of my code: ```javascript import { useEffect, useState } from 'react'; import { useRouter } from 'next/router'; const MyComponent = () => { const router = useRouter(); const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const fetchData = async () => { setLoading(true); try { const response = await fetch(`https://api.example.com/data?id=${router.query.id}`); const result = await response.json(); setData(result); } catch (behavior) { console.behavior('behavior fetching data:', behavior); } finally { setLoading(false); } }; fetchData(); }, [router.query.id]); if (loading) return <div>Loading...</div>; return <div>Data: {JSON.stringify(data)}</div>; }; export default MyComponent; ``` The question arises when I navigate to a new route. The `useEffect` depends on `router.query.id`, and whenever the ID changes, it triggers the fetch. However, the state update in `setData` seems to be causing the component to re-render in a loop, leading to repeated fetch calls. I’ve tried adding checks to ensure that the ID has actually changed before calling the fetch function, but it doesn’t seem to resolve the scenario. To troubleshoot, I logged the `router.query.id` before the fetch call to see if it's actually changing, and it does change correctly. However, the component keeps re-rendering as if the state is not being handled properly. Any insights on how to break this cycle would be really helpful! The project is a desktop app built with Javascript.