คุณจะป้องกันไม่ให้การอัปเดต state ทำให้เกิดการ re-render มากเกินไปได้อย่างไร?

Question

Accepted Answer

การเปลี่ยนแปลง state จะทำให้เกิดการ re-render และ state ที่มีโครงสร้างไม่ดีอาจทำให้เกิดการ re-render **มากกว่าที่จำเป็นอย่างมาก** ซึ่งทำให้แอปช้าลง กลยุทธ์สำคัญคือ: subscribe เฉพาะส่วนที่แคบ, แยก state, ใช้ memoize และเก็บ state ไว้ในระดับ local ## 1. Subscribe เฉพาะส่วน (slice) ที่จำเป็นน้อยที่สุด ```jsx // ❌ subscribing to the whole store → re-renders on ANY change const store = useStore(); const count = store.count; // ✅ select only what you use → re-renders only when `count` changes const count = useStore((s) => s.count); ``` การ subscribe แบบเลือกเฉพาะ (selector ของ Zustand/Redux, atom ของ Jotai) เป็นปัจจัยที่มีผลมากที่สุด คอมโพเนนต์จะ re-render เฉพาะเมื่อ slice ที่เฉพาะเจาะจงของมันเปลี่ยนแปลง ไม่ใช่ทุกครั้งที่ store อัปเดต ## 2. แยก state / context เพื่อจำกัดวงผลกระทบ ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. ใช้ memoize กับคอมโพเนนต์และค่าต่าง ๆ ```jsx const Item = React.memo(ItemComponent); // skip re-render if props are unchanged const expensiveValue = useMemo(() => compute(data), [data]); const handleClick = useCallback(() => doX(id), [id]); // stable function reference ``` Memoization ป้องกันไม่ให้คอมโพเนนต์ลูก re-render เมื่อ props ของมัน (โดยอิงตาม reference) ไม่เปลี่ยนแปลง แต่จะได้ผลก็ต่อเมื่อคุณรักษา props/callback ให้คงที่ในเชิง reference ด้วย (จึงต้องใช้ `useCallback`/`useMemo`) และอัปเดต state แบบ **immutable** ## 4. เก็บ state ไว้ในระดับ local ให้มากที่สุด ```text State high in the tree re-renders everything below it. Move state DOWN to the smallest component that needs it → smaller re-render scope. ``` ## 5. อย่าเก็บค่าที่คำนวณได้ (derived); หลีกเลี่ยงการสร้าง reference ใหม่ในทุกครั้งที่ render ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. ใช้ memoized selector สำหรับข้อมูลที่คำนวณได้ ```js const selectActive = createSelector([s => s.items], items => items.filter(i => i.active)); // returns the SAME reference when items didn't change → no needless re-render ``` ## วัดผลก่อน ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## ทำไมจึงสำคัญ การ re-render ที่มากเกินไปเป็นสาเหตุหลักของแอปที่ขับเคลื่อนด้วย React/state ที่ทำงานช้า และมันเกิดจากวิธีการที่ state ถูกจัดโครงสร้างและถูก subscribe ชุดเครื่องมือ ได้แก่ การ subscribe แบบเลือกเฉพาะที่แคบ, การแยก context, memoization ที่มี reference คงที่, การอัปเดตแบบ immutable และการเก็บ state ไว้ในระดับ local ล้วนควบคุมขอบเขตของการ re-render โดยตรง ที่สำคัญ คุณควร **วัดผล** (Profiler) เพื่อค้นหาคอขวดที่แท้จริงก่อนการเพิ่มประสิทธิภาพ เพราะ memoization ที่ทำอย่างไม่ระมัดระวังจะเพิ่มความซับซ้อนโดยไม่ได้ประโยชน์ การเข้าใจว่าอะไรเป็นตัวกระตุ้นการ re-render และวิธีควบคุมมันเป็นสิ่งจำเป็นสำหรับแอปขนาดใหญ่ที่มีประสิทธิภาพ