👋 Welcome to Learning Log
This is my personal space to document and share my journey as a software developer and as a person growing in life, thought, and faith.
Here, I’ll share:
• Learning progress — currently focused on full-stack web development(typescript) and sometimes Flutter. After a year focused on DSA at A2SV, I’m now fully focused on learning and building real-world products.
• Projects & experiments — small builds, exercises, and hands-on explorations.
• Mistakes & lessons — from coding, learning, and life.
• EUREKA moments (aha moments) — insights that suddenly click while learning dev, life, and belief.
• Thoughts & questions — on software, belief, philosophy, science, and what truly matters.
• Ideas & discussions — exploring decisions, priorities, and how things really work.
If you’re reading this, welcome 😊
This is my personal space to document and share my journey as a software developer and as a person growing in life, thought, and faith.
Here, I’ll share:
• Learning progress — currently focused on full-stack web development(typescript) and sometimes Flutter. After a year focused on DSA at A2SV, I’m now fully focused on learning and building real-world products.
• Projects & experiments — small builds, exercises, and hands-on explorations.
• Mistakes & lessons — from coding, learning, and life.
• EUREKA moments (aha moments) — insights that suddenly click while learning dev, life, and belief.
• Thoughts & questions — on software, belief, philosophy, science, and what truly matters.
• Ideas & discussions — exploring decisions, priorities, and how things really work.
If you’re reading this, welcome 😊
React Async Rendering – What Confused Me & What Finally Clicked
I was confused about why async/await works in normal JS, but fails in React client components.
At first it felt inconsistent… but here’s what finally made sense 👇
1️⃣ React client components render synchronouslyWhen React renders, it expects JSX immediately.If a component is async, it returns a Promise, not JSX — and React can’t handle that.
That’s why await directly inside a client component breaks things.
2️⃣ Then why does useEffect work?Because useEffect runs after the render.React renders the UI first, then async work happens later — no blocking.
3️⃣ Why async works in Server ComponentsServer components run on the server.They can await, and React sends HTML only after data is ready.
4️⃣ Where Suspense fits inReact does support async UI — but only when React controls it.Suspense pauses part of the UI, not the whole render.
Final understanding:
Async is not the problem Async during client render is. It’s only allowed when React manages it (Server Components or Suspense).
I was confused about why async/await works in normal JS, but fails in React client components.
At first it felt inconsistent… but here’s what finally made sense 👇
1️⃣ React client components render synchronouslyWhen React renders, it expects JSX immediately.If a component is async, it returns a Promise, not JSX — and React can’t handle that.
That’s why await directly inside a client component breaks things.
2️⃣ Then why does useEffect work?Because useEffect runs after the render.React renders the UI first, then async work happens later — no blocking.
3️⃣ Why async works in Server ComponentsServer components run on the server.They can await, and React sends HTML only after data is ready.
4️⃣ Where Suspense fits inReact does support async UI — but only when React controls it.Suspense pauses part of the UI, not the whole render.
Final understanding:
Async is not the problem Async during client render is. It’s only allowed when React manages it (Server Components or Suspense).
