[Help]: Can (and should I) clean up embla listeners?

[roderickdecorrespondent]

Summary

Functions like onMount() can return an optional cleanup function. Is there something similar for the embla svelte component? Is it even needed?

(See example below)

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

We currently have something like this (pseudo code):

<script>
function onemblaInit( event ) {
  const embla = event.detail;
  embla.on('event', onEvent);
  
  // Does this work? Is it needed?
  () => embla.off('event', onEvent);
}
</script>

<carousel {onemblaInit} ... />

CodeSandbox example

No response

[davidjerleke]

Hi @roderickdecorrespondent,

Good question! Event handlers in Embla will persist for the full lifecycle of the carousel instance — even across reInit calls — until the carousel is explicitly destroyed. When the Svelte component is unmounted, destroy() is automatically called, and all event handlers are cleaned up at that point:

Svelte package

embla-carousel/packages/embla-carousel-svelte/src/components/emblaCarouselSvelte.ts

Lines 50 to 52 in 0848932

	destroy: () => {
	if (emblaApi) emblaApi.destroy()
	},

Core package used by the Svelte package

embla-carousel/packages/embla-carousel/src/components/EmblaCarousel.ts

Lines 149 to 156 in 0848932

	function destroy(): void {
	if (destroyed) return
	destroyed = true
	mediaHandlers.clear()
	deActivate()
	eventHandler.emit('destroy')
	eventHandler.clear()
	}

So, you only need to manually call embla.off(...) if you want to remove a listener before the carousel is destroyed. If you just attach listeners on init and let the carousel live its full lifecycle, no extra cleanup function is necessary.

[roderickdecorrespondent]

Awesome, thanks for the quick reply!