ก่อน วัด จากนั้นแก้ไขสาเหตุที่แท้จริง — อย่าโรยเม็ด useMemo ทั่วไปตามการคาดเดา
ใช้ React DevTools Profiler (เปิดใช้งาน "Highlight updates when components render") มันแสดงว่า components ใดถูก re-render และ ทำไม (props เปลี่ยน state เปลี่ยน parent render context เปลี่ยน)
หักล้าง :
React.memo// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. Context value สร้างซ้ำในแต่ละ render → ผู้บริโภคทั้งหมด re-render memoize value หรือแยกบริบท
3. State วางสูงเกินไป การลดลง state เพื่อให้ components น้อยกว่าขึ้นอยู่กับมักจะเป็นชัยชนะครั้งใหญ่:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. งานราคาแพงใน render → ห่อด้วย useMemo
Re-renders มักจะ ถูก — React ถือเร็ว "optimizations" ส่วนใหญ่เพิ่มความซับซ้อนโดยไม่มีประโยชน์ที่วัดได้ ต้องการ โครงสร้างแก้ไข (colocating state list virtualization สำหรับแถบหลายพัน) มากกว่าการกระจาย memos ปรับให้เหมาะสม hotspots เฉพาะที่ profiler เปิดเผย และวัดซ้ำเพื่อยืนยันว่าการแก้ไขช่วยได้จริงๆ