Performance Optimization in React (เทคนิคเพิ่มประสิทธิภาพใน React)

การเพิ่มประสิทธิภาพเป็นสิ่งสำคัญสำหรับแอป React ที่ซับซ้อน มาดูเทคนิคต่างๆกัน

Memoization (การจำค่าเพื่อป้องกันการคำนวณซ้ำ)

ใช้ React.memo, useMemo และ useCallback เพื่อป้องกันการ render ซ้ำที่ไม่จำเป็น

// ใช้ React.memo สำหรับ Component
const MemoizedComponent = React.memo(function MyComponent({ data }) {
  return <div>{data}</div>;
});

// ใช้ useMemo สำหรับค่า
const computedValue = useMemo(() => expensiveCalculation(input), [input]);

// ใช้ useCallback สำหรับฟังก์ชัน
const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

Virtualization (แสดงเฉพาะส่วนที่เห็นใน viewport)

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

const Row = ({ index, style }) => <div style={style}>Row {index}</div>;

const Example = () => (
  <List
    height={500}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

Code Splitting (แบ่งโค้ดเพื่อโหลดเมื่อจำเป็น)

const OtherComponent = React.lazy(() => import("./OtherComponent"));

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

หมายเหตุ

• วัดประสิทธิภาพก่อนและหลัง optimize ด้วย React DevTools
• ใช้ Profiler เพื่อหาจุด bottleneck
• ไม่ควร premature optimization ในขั้นตอนพัฒนาแรกๆ