Performance & Patterns

Performance คือปัญหาเรื่อง rendering

React เร็วอยู่แล้วโดย default ปัญหา performance จริง ๆ เกือบทั้งหมดมาจากสองอย่าง: render บ่อยเกินไป (component re-render ทั้งที่สิ่งที่แสดงไม่ได้เปลี่ยน) หรือ render มากเกินไป (render ครั้งเดียวทำงานหนัก) วิธีแก้เป็นเชิงโครงสร้าง — เก็บ state ให้อยู่ต่ำ, หยุดการ propagate ของ re-render ตรงจุดที่ไม่สำคัญ และหยิบ memoization มาใช้ก็ต่อเมื่อ profiler บอกว่าจำเป็น

โมดูลนี้ยังครอบคลุม pattern ที่ทำให้ component composable ด้วย — เพราะ component tree ที่ compose มาดีมักจะเป็น tree ที่เร็ว

โมดูลนี้ครอบคลุมอะไรบ้าง

บทเรียน	สิ่งที่คุณจะได้เรียน
Rendering performance	ทำไม component ถึง re-render และจะ render ให้น้อยลงอย่างไร
Memoization in practice	`useMemo` / `useCallback` / `React.memo` — และ compiler
Composition patterns	compound component, render props, controlled vs uncontrolled
Refs, portals & escape hatches	เมื่อไรควรก้าวออกนอก declarative model

กฎข้อเดียวของการ optimize

flowchart LR
  slow["รู้สึกว่าช้า"] --> profile["profile ก่อน
(React DevTools)"]
  profile --> find["หาสาเหตุจริง
(render บ่อยไป หรือทำงานหนักไป)"]
  find --> fix["แก้สาเหตุนั้นให้ตรงจุด"]
  fix -. เลี่ยง .-> guess["โปรย memo ไปทั่ว
ด้วยการเดา"]

วัดผลก่อน memoize

ความผิดพลาดที่พบบ่อยที่สุดคือ memoize แบบรีเฟล็กซ์ — ห่อทุกอย่างด้วย useMemo/useCallback ทั้งที่ยังไม่รู้ว่าช่วยไหม memoization มีต้นทุนของตัวเอง (memory, การเปรียบเทียบ, ความซับซ้อน) และ React Compiler ตอนนี้ทำแทนให้เกือบหมดแล้ว profile ก่อน, แก้สาเหตุจริง แล้วปล่อยให้ compiler จัดการที่เหลือ