Use useLayoutEffect for setting the aspect-ratio to avoid flashing …

…inactive slides on load.
nkzw-tech · Oct 18, 2023 · 8ac731d · 8ac731d
1 parent 5dc53f3
commit 8ac731d
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/packages/remdx/src/hooks/use-aspect-ratio-fitting.ts b/packages/remdx/src/hooks/use-aspect-ratio-fitting.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import useResizeObserver, { ResizeHandler } from 'use-resize-observer';
 
 export default function useAspectRatioFitting(aspectRatio: number) {
@@ -42,7 +42,7 @@ export default function useAspectRatioFitting(aspectRatio: number) {
     [targetWidth, targetHeight],
   );
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!containerRef || !containerRef.current) {
       return;
     }