fix(use-image): set status after hydrated (#4486)

* fix(use-image): set status after hydrated * fix(use-image): use useSafeLayoutEffect instead
nextui-org · Jan 3, 2025 · 5d0fc9f · 5d0fc9f
1 parent 0eb96f6
commit 5d0fc9f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/.changeset/fair-pigs-tap.md b/.changeset/fair-pigs-tap.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/use-image": patch
+---
+
+set status after hydrated
diff --git a/packages/hooks/use-image/src/index.ts b/packages/hooks/use-image/src/index.ts
@@ -6,6 +6,7 @@ import type {ImgHTMLAttributes, SyntheticEvent} from "react";
 
 import {useRef, useState, useEffect, MutableRefObject} from "react";
 import {useIsHydrated} from "@nextui-org/react-utils";
+import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
 
 type NativeImageProps = ImgHTMLAttributes<HTMLImageElement>;
 
@@ -71,9 +72,7 @@ export function useImage(props: UseImageProps = {}) {
 
   const imageRef = useRef<HTMLImageElement | null>(isHydrated ? new Image() : null);
 
-  const [status, setStatus] = useState<Status>(() =>
-    isHydrated ? setImageAndGetInitialStatus(props, imageRef) : "pending",
-  );
+  const [status, setStatus] = useState<Status>("pending");
 
   useEffect(() => {
     if (!imageRef.current) return;
@@ -97,6 +96,12 @@ export function useImage(props: UseImageProps = {}) {
     }
   };
 
+  useSafeLayoutEffect(() => {
+    if (isHydrated) {
+      setStatus(setImageAndGetInitialStatus(props, imageRef));
+    }
+  }, [isHydrated]);
+
   /**
    * If user opts out of the fallback/placeholder
    * logic, let's just return 'loaded'