I created a section in Shopify where the JavaScript needs to re-render every time the user makes changes. One thing I don’t fully understand is that when the JS is re-rendered, the old event listeners stack with the new ones. Here’s a minimal example:

{% schema %}
{
  "name": "Table",
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "Select Collection"
    }
  ],
  "presets": [
    {
      "name": "Table maple syrup"
    }
  ]
}
{% endschema %}

When the user makes a change, "Hello World" prints once in the Theme Editor. When making another change, "Hello World" prints twice, and so on.

Is this expected behavior? What if I’m using a carousel and the user makes 10 different changes? Would we then end up with 10 instances of the carousel in the Theme Editor?