🔁 Vấn đề:

• Bạn có danh sách hơn 100 thuốc (medicines).
• Khi thêm 1 thuốc mới vào medicinesSubmit, toàn bộ table (ProductHomeRight) bị render lại.
• Mỗi thuốc con (PrescribingMedicine) cũng bị render lại hết, dù chỉ 1 item thay đổi.

👉 Khi medicinesSubmit thay đổi → hàm getAvailableStock(medicine) chạy lại cho tất cả thuốc, dẫn đến

• ✅ Chỉ 1 thuốc thực sự thay đổi stock.
• ❌ Nhưng tất cả PrescribingMedicine đều re-render vì availableStock là giá trị mới mỗi lần.

✅ Giải pháp tối ưu (bằng useMemo):

Cách nhớ:

"Tính trước mọi availableStock, lưu vào Map, truyền giá trị ổn định."

Cách viết:

const availableStockMap = useMemo(() => {
  const map = new Map();
  medicines.forEach(medicine => {
    const existing = medicinesSubmit?.find(item => item.id === medicine.id);
    const stock = existing
      ? Math.max(0, medicine.in_stock - existing.quantity)
      : medicine.in_stock;
    map.set(medicine.id, stock);
  });
  return map;
}, [medicines, medicinesSubmit]);

Khi render component:

 {!medicineLoading && medicines.length > 0 && medicines.map(medicine => (
    <PrescribingMedicine key={medicine.id} 
    availableStock={availableStockMap.get(medicine.id)}
    ...
    />
  ))}

Component con (LineItem):

const PrescribingMedicine = ({props...}) = {...}

export default React.memo(PrescribingMedicine)

🎯 Kết quả: