การปรับปรุงประสิทธิภาพใน React เป็นสิ่งสำคัญสำหรับ user experience ที่ดี มาดูเทคนิคที่ช่วยได้ ## 1. React.memo ใช้สำหรับป้องกัน unnecessary re-renders ใน functional components: ```jsx import React, { memo } from 'react'; const ExpensiveComponent = memo(function ExpensiveComponent({ data }) { console.log('Rendering ExpensiveComponent'); return (

{data.map(item => (

{item.name}

))}

); }); // จะ re-render เฉพาะเมื่อ data เปลี่ยน ``` ## 2. useMemo และ useCallback **useMemo** สำหรับ memoize ค่าที่คำนวณแล้ว: ```jsx import React, { useMemo } from 'react'; function ProductList({ products, filter }) { const filteredProducts = useMemo(() => { return products.filter(product => product.name.toLowerCase().includes(filter.toLowerCase()) ); }, [products, filter]); return (

{filteredProducts.map(product => ( ))}

); } ``` **useCallback** สำหรับ memoize functions: ```jsx import React, { useCallback, useState } from 'react'; function TodoApp() { const [todos, setTodos] = useState([]); const addTodo = useCallback((text) => { setTodos(prev => [...prev, { id: Date.now(), text }]); }, []); // ไม่มี dependencies const deleteTodo = useCallback((id) => { setTodos(prev => prev.filter(todo => todo.id !== id)); }, []); return (

); } ``` ## 3. Code Splitting ใช้ React.lazy และ Suspense สำหรับ lazy loading: ```jsx import React, { Suspense, lazy } from 'react'; const HeavyComponent = lazy(() => import('./HeavyComponent')); function App() { return (

}> ); } ``` ## 4. Virtual Scrolling สำหรับ list ที่มีข้อมูลเยอะ: ```jsx import { FixedSizeList as List } from 'react-window'; function VirtualizedList({ items }) { const Row = ({ index, style }) => (

{items[index].name}

); return ( {Row} ); } ``` ## เทคนิคเพิ่มเติม - ใช้ React DevTools Profiler เพื่อหา performance bottlenecks - หลีกเลี่ยงการสร้าง object หรือ array ใหม่ใน render - ใช้ key ที่เหมาะสมใน lists - พิจารณาใช้ state management libraries เช่น Zustand หรือ Redux Toolkit ## สรุป การ optimize performance ควรทำเมื่อจำเป็นเท่านั้น เริ่มต้นด้วยการวัดประสิทธิภาพก่อน แล้วใช้เทคนิคที่เหมาะสม

React Performance Optimization เทคนิคที่ควรรู้

บทความที่เกี่ยวข้อง

React Hooks เบื้องต้น: useState และ useEffect

การจัดการ State ใน React ด้วย Context API

Custom Hooks ใน React: สร้างและใช้งาน