| State |
|---|
| เก็บค่าเดียวที่เมื่อเปลี่ยนจะกระตุ้นให้ render ใหม่ | state ภายในคอมโพเนนต์: ช่องกรอกฟอร์ม, สวิตช์เปิด/ปิด, ตัวนับ |
| เก็บ state ที่ขับเคลื่อนด้วย action reducer คล้าย store ขนาดเล็ก | state ที่มีหลายฟิลด์เชื่อมโยงกัน หรือมีการเปลี่ยนสถานะที่ซับซ้อน |
| เก็บค่าที่เปลี่ยนแปลงได้โดยไม่กระตุ้นให้ render ใหม่ | คอนเทนเนอร์แบบ mutable, timer, และการเข้าถึง DOM โดยตรงผ่าน .current |
| Effects |
|---|
| รัน side effect หลัง render พร้อมฟังก์ชัน cleanup แบบเลือกได้ | ดึงข้อมูล, subscription, และการซิงก์กับระบบภายนอก |
| ฟังก์ชันที่ effect คืนค่ามาจะรันก่อน effect ถัดไป และรันอีกครั้งตอน unmount | ยกเลิก subscription และ timer หรือยกเลิก fetch ที่กำลังทำงานอยู่ |
| เหมือน useEffect แต่ทำงานแบบ synchronous หลัง DOM ถูกแก้ไข | อ่านหรือเขียน layout ก่อนเบราว์เซอร์วาดหน้าจอ (toast, tooltip) |
| event handler รันเพื่อตอบสนองการกระทำของผู้ใช้ ส่วน effect รันหลัง render เพื่อซิงก์ข้อมูล | logic ที่เกิดจากผู้ใช้อยู่ใน handler ส่วน logic ที่เกิดจากการ render อยู่ใน effect |
| ในโหมดพัฒนาจะ mount คอมโพเนนต์สองครั้ง เพื่อให้ effect รัน, cleanup, แล้วรันอีกครั้ง | จับ subscription ที่ซ้ำซ้อนและ cleanup ที่ขาดหายก่อนขึ้น production |
| ประสิทธิภาพ |
|---|
| แคชค่าที่คำนวณแล้วไว้จนกว่า dependency จะเปลี่ยน | หลีกเลี่ยงการคำนวณใหม่ที่แพงระหว่างการ render; เปลี่ยนค่าใน deps โดยเจตนาเมื่อต้องการล้างแคช |
| แคชการอ้างอิงฟังก์ชันไว้จนกว่า dependency จะเปลี่ยน | callback ที่เสถียร ซึ่งส่งให้คอมโพเนนต์ลูกแบบ memo หรือใช้เป็น dependency |
| ข้ามการ render ใหม่ของคอมโพเนนต์ที่ props ไม่เปลี่ยนแปลง | คอมโพเนนต์ลูกที่หนัก; ส่งฟังก์ชันเปรียบเทียบเป็นอาร์กิวเมนต์ที่สองเมื่อ shallow equality ไม่เพียงพอ (เป็น HOC ไม่ใช่ hook) |
| Context และ handle ภายนอก |
|---|
| อ่านค่า context โดยไม่ต้อง prop drilling | ธีม, locale, หรือผู้ใช้ที่ล็อกอินแล้ว ซึ่งแชร์กันทั้งต้นไม่ |
| ปรับแต่ง instance ที่ parent เห็นผ่าน ref | เปิดเผย API แบบจำกัดขอบเขตจากคอมโพเนนต์ลูกผ่าน forwardRef |
| Concurrency และอื่น ๆ |
|---|
| ทำเครื่องหมายการอัปเดต state ว่าไม่เร่งด่วน เพื่อให้ UI ตอบสนองได้ต่อเนื่อง | ทำให้ input ตอบสนองไวขณะที่ลิสต์ขนาดใหญ่ render ใหม่ |
| เลื่อนค่าออกไปเพื่อให้การอัปเดตถูกขัดจังหวะได้ | debounce การ render ที่แพงโดยไม่ต้องใช้ timer |
| สร้าง id ที่เสถียรและไม่ซ้ำ สำหรับแอตทริบิวต์ด้านการเข้าถึง (accessibility) | เชื่อม label กับ input ให้ตรงกันระหว่างการ render บนเซิร์ฟเวอร์และไคลเอนต์ |
| อ่าน promise หรือ context ระหว่างการ render; เป็น hook เดียวที่เรียกแบบมีเงื่อนไขได้ | คลี่ค่า promise ด้วย Suspense หรืออ่าน context ภายใน early return |
| เก็บ state ที่ขับเคลื่อนด้วย form action โดยรวม flag บอกสถานะ pending มาด้วย | การส่งฟอร์มที่คืน error หรือ state ที่อัปเดตแล้วมาแสดงแบบ inline |
| render ค่า optimistic ทันที แล้วกลับไปใช้ state จริงเมื่อ action เสร็จสิ้น | แสดงการกดไลก์หรือข้อความที่เพิ่งส่ง ขณะที่ request ไปยังเซิร์ฟเวอร์ยังทำงานอยู่ |
| อ่านสถานะ pending ของ <form> ที่ครอบอยู่ โดยไม่ต้องส่ง props | ปุ่ม submit ที่ปิดตัวเองขณะที่ฟอร์มแม่กำลังส่งข้อมูล |
| subscribe ไปยัง store ที่อยู่นอก React และอ่าน snapshot เดียวที่สอดคล้องกัน | API ของเบราว์เซอร์อย่างสถานะออนไลน์ หรือ state store ของบุคคลที่สาม |
| รันก่อน layout effect ออกแบบมาเพื่อแทรกกฎ CSS-in-JS | ไลบรารีจัดการสไตล์ที่ต้องแทรกกฎก่อนที่ layout จะถูกอ่าน |
| แสดงป้ายกำกับแบบกำหนดเองสำหรับ state ภายในของ hook ใน React DevTools | ติดป้ายว่า custom hook เก็บอะไรไว้ขณะ debug |
| hook ที่คุณเขียนเองเพื่อประกอบ hook ในตัวของ React แล้วนำไปแชร์ logic | พฤติกรรมที่มี state และใช้ซ้ำได้ เช่น useFetch หรือ useMediaQuery |