[Help]: Why does Embla for React use methods?

[Alvi24]

Summary

Why does Embla Carousel in React use methods and not state to control the carousel?

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

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

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

Hi,
Thanks for the question.

I’m not sure I understand what you’re asking. When you say “why does Embla for React use methods and not state”, do you mean:

• Why the carousel is controlled via an API (like emblaApi.scrollTo()) instead of React state?
• Or are you asking how to integrate Embla with React state for controlling slides?
• Or something else entirely?

[Alvi24]

Hi,

Thanks for the question.

I’m not sure I understand what you’re asking. When you say “why does Embla for React use methods and not state”, do you mean:

• Why the carousel is controlled via an API (like emblaApi.scrollTo()) instead of React state?

• Or are you asking how to integrate Embla with React state for controlling slides?

• Or something else entirely?

"Why the carousel is controlled via an API (like emblaApi.scrollTo()) instead of React state?"

[davidjerleke]

@Alvi24, thanks for clarifying.

There are quite a few benefits to controlling Embla via an API (like emblaApi.scrollTo()) instead of relying on React state:

• It lets you granularly create only the state you actually need, instead of a component managing a large internal state for many features you might never use. This keeps things more lightweight and flexible.

• Whenever the core package (embla-carousel) API changes, the React wrapper (and the Vue, Svelte, Solid versions) automatically get access to those updates. There’s no need to manually expose new state or remove old ones, which reduces maintenance overhead and avoids lag between packages and package releases.

• It avoids unnecessary re-renders. React state updates trigger component re-renders, but many carousel interactions (like scrolling, dragging, momentum) happen at a high frequency. Using an imperative API keeps those operations fast and decoupled from React’s render cycle.

• It gives you more control over performance-sensitive behavior. The carousel can run its logic outside React, which is especially useful for smooth animations and gestures.

• It’s more composable. You can combine the API with your own state management (React state, Zustand, Redux, etc.) only where it makes sense, instead of being locked into a predefined pattern.

• It keeps the core logic framework-agnostic. The same API works across different frameworks, which is why the React integration stays thin and consistent with others.

• It makes Embla especially well-suited for component libraries. Library authors can build their own abstractions and state layers on top of the API without being constrained by built-in state decisions, making it easier to design reusable and customizable components.

So overall, the API-first approach keeps things lean, flexible, performant, and easier to maintain across ecosystems.