React product card unnecessary rerenders performance issue

Easy

You're debugging a performance issue in a React component. The team lead mentions that unnecessary re-renders might be the culprit. What's the problem in this code?

ReactReact performanceMemoizationFormattingComponent design

1function ProductCard({ product, onAddToCart }) {
const formatPrice = (price) => {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  }).format(price);
};
8
const formattedPrice = formatPrice(product.price);
10
return (
  <div className="product-card">
    <img src={product.image} alt={product.name} />
    <h3>{product.name}</h3>
    <p>{formattedPrice}</p>
    <button onClick={() => onAddToCart(product.id)}>
      Add to Cart
    </button>
  </div>
);
21}

You're debugging a performance issue in a React component. The team lead mentions that unnecessary re-renders might be the culprit. What's the problem in this code?

Hint