Why React components crash on first render when fetching data with useEffect

React components that fetch data inside useEffect() are prone to crashing on the first render because network requests are asynchronous and only execute after the initial render completes. During that first render, state variables like user remain at their initial value — typically null or undefined — meaning any attempt to access properties such as user.name will throw a runtime error. This happens because React cannot pause or delay rendering to wait for an API response; it must return JSX immediately. Developers can prevent such crashes by adding a guard condition using a ternary operator, logical AND (&&), or optional chaining (?.) to handle the null state gracefully. Once the API responds and state is updated via setState, React triggers a re-render with the actual data, safely displaying the fetched content.