❌ WITHOUT useCallback

📊 Current State:

Count: 0
Message: Initial message

Child Component (sẽ re-render khi count thay đổi)

💡 Child được wrap với React.memo

🔍 Điều gì xảy ra:

  1. 1. Click "Tăng Count" → Parent re-render
  2. 2. handleChildClick function được tạo mới
  3. 3. Child nhận props mới (function reference khác)
  4. 4. React.memo detect props change → Child re-render

📝 Code:

// ❌ Function tạo mới mỗi lần render
const handleChildClick = () => {
  console.log('Child clicked');
  setMessage(`Clicked at ${new Date().toLocaleTimeString()}`);
};

// Mỗi lần Parent re-render:
// → handleChildClick là function mới
// → Child nhận props mới
// → Child re-render (dù có React.memo)

🧪 Cách test:

  1. 1. Mở Console (F12)
  2. 2. Click "Tăng Count" nhiều lần
  3. 3. Quan sát: Child re-render mỗi lần Parent re-render
  4. 4. Click "Click me" để test functionality