Merge pull request #981 from lesha1201/fix/embla-api-initialized-with…

…-stale-options

[Bug]: `useEmblaCarousel` initializes Embla with stale options in certain cases

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]
 }