Waiting for an answer
Your dashboard sometimes crashes with 'Cannot read properties of undefined (reading name)'. Refresh, and it works. Refresh again, and it crashes.
This answers: Why does my page crash before data loads? No coding needed. 3 quick decisions.
- Reading code
- How a request travels
- Debugging without panic
Step 1 of 3
Your AI wrote this. Why is user empty at first?
const [user, setUser] = useState(); useEffect(() => { fetch("/api/me").then((r) => r.json()).then(setUser);}, []); return <h1>Hello, {user.name}</h1>;Why does my page crash before data loads?
Your page drew before its data arrived. Fetching from a server takes time, so the variable is still undefined when the code reads a property like user.name. Show a loading state until the data arrives and a message if the request fails. Writing user?.name only hides the crash, not the problem.
Breaks at Browser: Page used the data before it arrived
Why AI tools write this bug
AI-written components often fetch data in an effect and use it straight away, which works on a fast laptop and fails on slower connections.
How to fix it
- Show 'Loading…' until the data has arrived.
- Show a clear message when the request fails.
- Look one word left of the property in the error.
- Don't scatter ?. to silence the crash.
Check your own app
Paste this into Lovable, Cursor or Claude Code:
Without changing anything, find every place this app loads data in the browser (fetch, useEffect, React Query, Supabase calls). For each, tell me what the screen shows while it waits, what it shows if the request fails, and whether any code uses the result before it has arrived.
Common questions
- What does await do?
- await pauses that function until an answer arrives. It doesn't stop the page drawing, so the page still needs something to show while it waits.