Because you forgot the empty dependency array. Without it, the effect runs on every render, and each fetch triggers another render, creating an infinite loop of requests. Use an empty array to fetch once on mount.

Because showing nothing while data loads makes the app feel broken. Track a loading flag and show a spinner or skeleton so the user knows something is happening and the UI feels responsive.

Use a cleanup function in useEffect or an abort signal to cancel stale requests. If a component unmounts while a fetch is in flight, setting state on it can warn or error, so cancel the request on cleanup.