React Deep Dive

คอร์สแบบ standalone ระดับ intermediate→advanced ว่าด้วย React 19 ตั้งแต่ rendering model และ reconciliation ไปจนถึง hooks เชิงลึก, state และ data flow, transitions และ Suspense, Server Components และ Actions, React Compiler และ performance — สอนผ่าน code ที่ annotate ให้เห็นชัดว่า React ทำอะไรและทำไม

เริ่มที่นี่ ข้ามไปที่ Hooks

สิ่งที่คุณจะได้เรียน

Foundations & Mental Model

UI เป็นฟังก์ชันของ state, JSX & element, reconciliation และทำไม render ต้อง pure เริ่ม →

Hooks In Depth

useState, useEffect (และเมื่อไรไม่ควรใช้), useRef, memoization & compiler และ custom hooks เรียน →

State Management & Data Flow

lifting state, composition, Context, useReducer และ external store จัดการ →

Concurrent React & Suspense

transitions, useDeferredValue, Suspense & lazy, error boundary และ use() hook concurrent →

React 19: Actions, RSC & Forms

Server Components, Actions & useActionState, useOptimistic & form และ React Compiler level up →

Performance & Patterns

rendering performance, memoization ในทางปฏิบัติ, composition pattern และ escape hatch optimize →

Tooling, Testing & Production

Vite & framework, testing ด้วย RTL, TypeScript กับ React และ ecosystem ตอน production ship →

คอร์สนี้ทำงานยังไง

เข้าใจ model ก่อน แล้วค่อยดู code

ทุกหัวข้อเริ่มจาก model — UI = f(state), reconciliation ตัดสินใจอย่างไรว่าอะไรเปลี่ยน, ทำไม effect ถึง sync กับโลกภายนอก — พอเข้าใจแล้ว React จะเลิกดูเหมือนเวทมนตร์และกลายเป็นเรื่องที่สมเหตุสมผล

React 19 ที่ verify แล้ว

เขียนบน React 19 และตรวจสอบกับ official docs — Actions, use(), useActionState/useOptimistic, ref-as-prop และ React Compiler ถูกสอนตามที่มีอยู่จริงวันนี้ ไม่ใช่แบบเมื่อสามปีก่อน

เน้นการออกแบบ ไม่ใช่แค่ syntax

ไม่ใช่แค่ “นี่คือ useEffect” แต่เป็น “ทำไมคุณอาจไม่ต้องใช้ useEffect และควรทำอะไรแทน” คุณจะ reason เรื่อง render, dependency และ performance ได้อย่างมั่นใจ

ไดอะแกรมที่อธิบายได้

render/commit phase, reconciliation, state-เป็น-snapshot, effect timing และ Suspense เป็นไดอะแกรม Mermaid ที่รองรับธีม สองภาษา (English / ไทย) พร้อมบันทึกความคืบหน้า quiz