[Bug]: Event Hooks Do Not Get Called With Next 12 + React 18 about embla-carousel

[davidjerleke]

Hi @ranno-lauri,

Thanks for the bug report. If you're unsure something is a bug or not, you can create a discussion instead. To answer your question, there's a gotcha with the init event and embla-carousel-react. Please read this to understand it:

• #379 (comment)

As far as I can see, all other events are working as expected in your CodeSandbox. For example, if I drag the carousel and wait for it to stop, it will fire the settle event.

Best,
David

[ranno-lauri]

Hey @davidjerleke,

Thank you for the reply and suggestions. Tried it out and works as expected. Problem solved! Should this be included as 'gotcha' in the documentation?

[ranno-lauri]

Indeed, caused quite a bit of confusion. That's the general emotion with useEffect and React 18 has just made it worse 😆. Using useEffect instead of 'init' would be habitual for React devs. To make migrations from React 17 -> 18 easier for others, would still be useful to have the information in the documents, but add a deprecation note to the 'init' method (both in docs and in code), so new implemenations would not use it.

[davidjerleke]

@ranno-lauri thanks for confirming.

Should this be included as 'gotcha' in the documentation?

I'm not sure which solution would be optimal. I've been considering removing the init event because it feels like it has been causing more confusion than anything else 😅. For example, when using Vanilla JS, you can just run any code after invoking the EmblaCarousel() constructor and the carousel will be ready. So the init event might be redundant:

// Vanilla JS
import EmblaCarousel from 'embla-carousel'

const emblaNode = document.querySelector('.embla')
const emblaApi = EmblaCarousel(emblaNode)

console.log('INIT - Embla is ready')
// instead of emblaApi.on('init', () => { console.log('INIT - Embla is ready') })

// React JS
import useEmblaCarousel from 'embla-carousel-react'

export function EmblaCarousel() {
  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true })

  useEffect(() => {
    if (!emblaApi) return
    
    console.log('INIT - Embla is ready')
  }, [emblaApi])
  // ...
}

What's your thoughts about this?

Best,
David

[davidjerleke]

Thanks for your input @ranno-lauri!