Attach event listener

I need this button on the product page to trigger the cart flow. Add an event listener so clicking Add to Cart calls addToCart with the product id, and ensure the listener is attached only once when the page initializes on Thursday morning.

Before I wire this up to procurement, make the click handler frictionless for reviewers: show the product id where the handler is bound, put the actual callback name addToCart at the top, and flag any closures capturing large objects that could leak memory.

I just attached the click handler for Add to Cart on the product page; QA reports the handler runs twice when clicked. I bound the listener inside the render function and the component re-renders; the product manager is waiting. I can't inspect the full render cycle in their staging environment. Likely cause and best fix to stop the duplicate calls?

Across several pages we keep getting duplicated event handlers after users navigate back and forth. This costs time debugging and causes cart duplication bugs. Which habit should the team adopt to stop these regressions: where to register listeners, how to structure teardown, and one small lint or code-review rule to catch it early?