🧠
🎣 React Hooks

useMemo
Memoization Hook

🚀 Tối ưu performance React app với useMemo - Hook mạnh mẽ để cache expensive calculations và prevent unnecessary re-computations

✨Từ cơ bản đến patterns nâng cao với demos thực tế

🧠Lý thuyết useMemo

🤔 useMemo là gì?

useMemo là React Hook giúp memoize (cache) kết quả của một phép tính. Nó chỉ tính toán lại khi dependencies thay đổi, giúp tối ưu performance.

const memoizedValue = useMemo(() => expensiveCalculation(a, b), [a, b]);

✅ Khi nào dùng useMemo:

  • •Expensive calculations (loops, math operations)
  • •Filtering/sorting large arrays
  • •Creating complex objects/arrays
  • •Derived state from props/state
  • •Preventing child re-renders

❌ Khi KHÔNG nên dùng:

  • •Simple calculations (a + b)
  • •Dependencies change frequently
  • •Primitive values that change rarely
  • •Over-optimization (premature optimization)
  • •Every computed value

🔄 Cách hoạt động:

1️⃣Lần đầu: Thực hiện calculation và cache kết quả
2️⃣Re-render: So sánh dependencies với lần trước
3️⃣Nếu giống: Trả về cached value (không tính lại)
4️⃣Nếu khác: Thực hiện calculation mới và update cache

⚖️ So sánh với các hooks khác:

useMemo
  • • Memoize values
  • • Return computed result
  • • Cache expensive calculations
useCallback
  • • Memoize functions
  • • Return memoized function
  • • Prevent function recreation
React.memo
  • • Memoize components
  • • Skip re-render if props same
  • • Component-level optimization
useMemo-syntax.tsxtsx