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

การปรับปรุงประสิทธิภาพใน React เป็นสิ่งสำคัญสำหรับ user experience ที่ดี มาดูเทคนิคที่ช่วยได้

1. React.memo

ใช้สำหรับป้องกัน unnecessary re-renders ใน functional components:

import React, { memo } from 'react';

const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
  console.log('Rendering ExpensiveComponent');
  
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
});

// จะ re-render เฉพาะเมื่อ data เปลี่ยน

2. useMemo และ useCallback

useMemo สำหรับ memoize ค่าที่คำนวณแล้ว:

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 (
    <div>
      {filteredProducts.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

useCallback สำหรับ memoize functions:

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 (
    <div>
      <TodoForm onAdd={addTodo} />
      <TodoList todos={todos} onDelete={deleteTodo} />
    </div>
  );
}

3. Code Splitting

ใช้ React.lazy และ Suspense สำหรับ lazy loading:

import React, { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

4. Virtual Scrolling

สำหรับ list ที่มีข้อมูลเยอะ:

import { FixedSizeList as List } from 'react-window';

function VirtualizedList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].name}
    </div>
  );

  return (
    <List
      height={600}
      itemCount={items.length}
      itemSize={50}
    >
      {Row}
    </List>
  );
}

เทคนิคเพิ่มเติม

• ใช้ React DevTools Profiler เพื่อหา performance bottlenecks
• หลีกเลี่ยงการสร้าง object หรือ array ใหม่ใน render
• ใช้ key ที่เหมาะสมใน lists
• พิจารณาใช้ state management libraries เช่น Zustand หรือ Redux Toolkit

สรุป

การ optimize performance ควรทำเมื่อจำเป็นเท่านั้น เริ่มต้นด้วยการวัดประสิทธิภาพก่อน แล้วใช้เทคนิคที่เหมาะสม