diff --git a/web/src/hooks/use-image-loaded.ts b/web/src/hooks/use-image-loaded.ts
index df030550a..653fb1538 100644
--- a/web/src/hooks/use-image-loaded.ts
+++ b/web/src/hooks/use-image-loaded.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 const useImageLoaded = (): [
   React.RefObject<HTMLImageElement | null>,
@@ -8,15 +8,15 @@ const useImageLoaded = (): [
   const [loaded, setLoaded] = useState(false);
   const ref = useRef<HTMLImageElement>(null);
 
-  const onLoad = () => {
+  const onLoad = useCallback(() => {
     setLoaded(true);
-  };
+  }, []);
 
   useEffect(() => {
-    if (ref.current && ref.current?.complete) {
+    if (ref.current?.complete) {
       onLoad();
     }
-  });
+  }, [onLoad]);
 
   return [ref, loaded, onLoad];
 };