Summary
flowchart LR
useState[useState<br/>จำค่าใน UI] --> Render[Re-render]
useRef[useRef<br/>จำค่าเงียบ ๆ] --> NoRender[ไม่ Re-render]
useMemo[useMemo<br/>จำค่าคำนวณ] --> Optimized[ประสิทธิภาพดีขึ้น]
useEffect[useEffect<br/>ทำ side effects] --> SideEffect[ทำงานเมื่ออะไรบางอย่างเกิดขึ้น]
classDef important fill:#a78bfa,stroke:#7c3aed,stroke-width:2px
class useState,useRef,useMemo,useEffect important
- useState — เก็บค่าและ re-render เมื่อค่าเปลี่ยน
- useRef — เก็บค่าโดยไม่ re-render (เหมาะกับ DOM refs)
- useMemo — จำค่าที่คำนวณแล้ว เพื่อประสิทธิภาพ
- useEffect — ทำงานเมื่อ state/props เปลี่ยน อย่าลืม cleanup!
Quiz: Hooks พื้นฐาน
ข้อ 1 / 50%