Skip to content

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%

useEffect ทำงานเมื่อไหร่?