diff --git a/packages/embla-carousel-react/src/components/useEmblaCarousel.ts b/packages/embla-carousel-react/src/components/useEmblaCarousel.ts
index 83f7a96c3..181525781 100644
--- a/packages/embla-carousel-react/src/components/useEmblaCarousel.ts
+++ b/packages/embla-carousel-react/src/components/useEmblaCarousel.ts
@@ -32,6 +32,18 @@ function useEmblaCarousel(
     if (emblaApi) emblaApi.reInit(storedOptions.current, storedPlugins.current)
   }, [emblaApi])
 
+  useEffect(() => {
+    if (areOptionsEqual(storedOptions.current, options)) return
+    storedOptions.current = options
+    reInit()
+  }, [options, reInit])
+
+  useEffect(() => {
+    if (arePluginsEqual(storedPlugins.current, plugins)) return
+    storedPlugins.current = plugins
+    reInit()
+  }, [plugins, reInit])
+
   useEffect(() => {
     if (canUseDOM() && viewport) {
       EmblaCarousel.globalOptions = useEmblaCarousel.globalOptions
@@ -47,18 +59,6 @@ function useEmblaCarousel(
     }
   }, [viewport, setEmblaApi])
 
-  useEffect(() => {
-    if (areOptionsEqual(storedOptions.current, options)) return
-    storedOptions.current = options
-    reInit()
-  }, [options, reInit])
-
-  useEffect(() => {
-    if (arePluginsEqual(storedPlugins.current, plugins)) return
-    storedPlugins.current = plugins
-    reInit()
-  }, [plugins, reInit])
-
   return [<EmblaViewportRefType>setViewport, emblaApi]
 }