useFaviconUrl now computes initial state synchronously

Author: samejr

apps/webapp/app/hooks/useFaviconUrl.ts

@@ -1,31 +1,24 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { extractDomain, faviconUrl } from "~/utils/favicon";
 
+function resolve(input: string, size: number): string | null {
+  const domain = extractDomain(input);
+  return domain && domain.includes(".") ? faviconUrl(domain, size) : null;
+}
+
 export function useFaviconUrl(urlInput: string, size: number = 64) {
-  const [url, setUrl] = useState<string | null>(null);
+  const [url, setUrl] = useState<string | null>(() => resolve(urlInput, size));
   const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
-  const update = useCallback(
-    (value: string) => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(() => {
-        const domain = extractDomain(value);
-        if (domain && domain.includes(".")) {
-          setUrl(faviconUrl(domain, size));
-        } else {
-          setUrl(null);
-        }
-      }, 400);
-    },
-    [size]
-  );
-
   useEffect(() => {
-    update(urlInput);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setUrl(resolve(urlInput, size));
+    }, 400);
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
-  }, [urlInput, update]);
+  }, [urlInput, size]);
 
   return url;
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx

@@ -442,15 +442,9 @@ function LogoForm({
   const [faviconError, setFaviconError] = useState(false);
   const logoFormRef = useRef<HTMLFormElement>(null);
   const submit = useSubmit();
-  const initializedRef = useRef(false);
   const prevFaviconRef = useRef(faviconPreview);
 
   useEffect(() => {
-    if (!initializedRef.current) {
-      initializedRef.current = true;
-      prevFaviconRef.current = faviconPreview;
-      return;
-    }
     if (faviconPreview === prevFaviconRef.current) return;
     prevFaviconRef.current = faviconPreview;
     if (mode === "logo" && logoFormRef.current) {