Why does my React component crash on the first render when using data fetched inside useEffect()?

Short summary

A beginner-level explanation of why React components crash on first render when fetching data inside useEffect(). Because useEffect runs after the initial paint, state starts as null or undefined; accessing properties like user.name without a guard condition throws an error. The fix is a ternary check or optional chaining before rendering data-dependent UI.

• •Explains async data fetching timing in React useEffect
• •Recommends guard conditions or optional chaining to prevent crashes
• •Not AI-related; basic React debugging tutorial

Generated with AI, which can make mistakes.