What are race conditions and how do you avoid them?

I fetch in useEffect with an empty dependency array for one-time fetches, or with the relevant dependencies when the fetch depends on values. I handle loading, error, and success states, and for real apps I use React Query for caching and invalidation.

Track separate loading and error state. Show a spinner while loading, an error with a retry on failure, and set loading to false in a finally block so the spinner always stops. Never leave a blank screen.

Use the correct dependency array. An empty array runs on mount. Including a state variable you update inside the effect causes a loop because each update triggers another run. The hooks lint plugin helps get this right.