perf: memorize values and eliminate states

app/dashboard/[guildId]/custom-commands/page.tsx

···
         return params.toString();
     }, [search]);
 
+    const setTagId = (id: string) => {
+        router.push(pathname + "?" + createQueryString("id", id));
+    };
+
     useEffect(() => {
         if (!Array.isArray(data)) return;
         if (data && !tag && data[0]) setTagId(data[0].id);
···
     }
 
     if (isLoading || !data) return <></>;
-
-    const setTagId = (id: string) => {
-        router.push(pathname + "?" + createQueryString("id", id));
-    };
 
     const editTag = <T extends keyof ApiV1GuildsModulesTagsGetResponse>(k: keyof ApiV1GuildsModulesTagsGetResponse, value: ApiV1GuildsModulesTagsGetResponse[T]) => {
         if (!tag) return;

app/dashboard/[guildId]/layout.tsx

···
     const cookies = useCookies();
     const params = useParams();
 
-    const [error, setError] = useState<string>();
     const [loaded, setLoaded] = useState<string[]>([]);
 
     const guild = guildStore((g) => g);
···
         }
     );
 
-    useEffect(() => {
-        if (data && "message" in data) {
-            setError(data?.message);
-            return;
-        }
+    const error = data && "message" in data ? data.message : undefined;
 
+    useEffect(() => {
+        if (!data || "message" in data) return;
         guildStore.setState(data);
     }, [data]);
 

app/dashboard/[guildId]/starboard/hooks.ts

···
 import { StarboardStyle } from "@/typings";
-import { useEffect, useState } from "react";
+import { useMemo } from "react";
 
 interface Example {
     avatar: string | null;
···
 }
 
 export function useExample(style: StarboardStyle) {
-    const [example, setExample] = useState<Example>({
-        avatar: "https://cdn.waya.one/r/823554a71e92ca6192ab500d9b597a7f.png",
-        username: "@spacewolf."
-    });
-
-    useEffect(
-        () => {
-            switch (style) {
-                case StarboardStyle.Username:
-                    setExample((e) => {
-                        return {
-                            ...e,
-                            avatar: "https://cdn.waya.one/r/823554a71e92ca6192ab500d9b597a7f.png",
-                            username: "@spacewolf."
-                        };
-                    });
-                    break;
-                case StarboardStyle.GlobalName:
-                    setExample((e) => {
-                        return {
-                            ...e,
-                            avatar: "https://cdn.waya.one/r/823554a71e92ca6192ab500d9b597a7f.png",
-                            username: "Space Wolf"
-                        };
-                    });
-                    break;
-                case StarboardStyle.Nickname:
-                    setExample((e) => {
-                        return {
-                            ...e,
-                            avatar: "https://cdn.waya.one/r/823554a71e92ca6192ab500d9b597a7f.png",
-                            username: "Luna’s Grandpa <3"
-                        };
-                    });
-                    break;
-                case StarboardStyle.NicknameAndGuildAvatar:
-                    setExample((e) => {
-                        return {
-                            ...e,
-                            avatar: "https://cdn.waya.one/r/a_3a2fa421f079827d31f4fd1b7a9971ba.gif",
-                            username: "Luna’s Grandpa <3"
-                        };
-                    });
-                    break;
-                case StarboardStyle.Anonymous:
-                    setExample((e) => {
-                        return {
-                            ...e,
-                            avatar: null,
-                            username: null
-                        };
-                    });
-                    break;
-            }
-        },
-        [style]
-    );
-
-    return example;
+    return useMemo<Example>(() => {
+        switch (style) {
+            case StarboardStyle.GlobalName:
+                return {
+                    avatar: "/space.webp",
+                    username: "Space Wolf"
+                };
+            case StarboardStyle.Nickname:
+                return {
+                    avatar: "/space.webp",
+                    username: "Luna’s Grandpa <3"
+                };
+            case StarboardStyle.NicknameAndGuildAvatar:
+                return {
+                    avatar: "/shiggy.gif",
+                    username: "Luna’s Grandpa <3"
+                };
+            case StarboardStyle.Anonymous:
+                return {
+                    avatar: null,
+                    username: null
+                };
+            default:
+                return {
+                    avatar: "/space.webp",
+                    username: "@spacewolf."
+                };
+        }
+    }, [style]);
 }

app/dashboard/[guildId]/starboard/page.tsx

···
                     defaultState={data.blacklistRoleIds || []}
                     max={500}
                     disabled={!enabled}
-                    onSave={(o) => edit("blacklistChannelIds", o.map(({ value }) => value))}
+                    onSave={(o) => edit("blacklistRoleIds", o.map(({ value }) => value))}
                 />
             </div>
         </div>

app/login/[social]/route.ts

···
     }
 
     redirect("/profile/connections?success=true");
-
 }

components/inputs/dumb-color-input.tsx

···
 import { cn } from "@/utils/cn";
 import { AnimatePresence, motion } from "framer-motion";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { AiOutlineEdit } from "react-icons/ai";
 
 interface Props {
···
     );
 
     // this cuz there can be multiple color inputs on the same page, so it will bug, so we need to identify them
-    const [inputId, setInputId] = useState<string>("");
-    useEffect(() => {
-        setInputId(Math.random().toString(36).slice(2, 15) + Math.random().toString(36).slice(2, 15));
-    }, []);
+    const [inputId] = useState<string>(() => Math.random().toString(36).slice(2, 15) + Math.random().toString(36).slice(2, 15));
 
     const [isHovered, setIsHovered] = useState<boolean>(false);
 

components/inputs/dumb-text-input.tsx

···
 import { cn } from "@/utils/cn";
-import React, { useEffect, useState } from "react";
+import React, { useMemo } from "react";
 
 interface Props {
     name?: string;
···
         disabled && "cursor-not-allowed opacity-50"
     );
 
-    const [length, setLength] = useState(0);
-
-    useEffect(() => {
-        setLength(dataName ? JSON.parse(value)[dataName]?.length : value?.length || 0);
-    }, [value]);
+    const length = useMemo(() => dataName ? JSON.parse(value)[dataName]?.length : value?.length || 0, [dataName, value]);
 
     return (
         <div className="relative select-none w-full max-w-full mb-3">

components/inputs/multi-select-menu.tsx

···
 
                 switch (res.status) {
                     case 200: {
+                        onSave?.(values);
                         setState(State.Success);
                         setTimeout(() => setState(State.Idle), 1_000 * 8);
                         break;

components/list.tsx

···
 
 export function ListTab({ tabs, url, searchParamName, disabled }: ListProps) {
     const [position, setPosition] = useState(0);
+    const [scrollMetrics, setScrollMetrics] = useState<{ canScroll: boolean; maxScroll: number; }>({ canScroll: false, maxScroll: 0 });
 
     const path = usePathname();
     const params = useSearchParams();
···
     function scroll(direction: "left" | "right") {
         if (!ref.current) return;
 
-        const scrollAmount = ref.current.clientWidth * 0.8; // Scroll 80% of the visible width
+        const scrollAmount = ref.current.clientWidth * 0.8;
 
         ref.current.scrollBy({
             top: 0,
···
         setPosition(scrollLeft);
     }
 
-    const isScrollable = ref.current ? ref.current.scrollWidth > ref.current.clientWidth : false;
+    useEffect(() => {
+        const element = ref.current;
+        if (!element) return;
+
+        const updateMetrics = () => {
+            const canScroll = element.scrollWidth > element.clientWidth;
+            const maxScroll = Math.max(element.scrollWidth - (element.clientWidth + 10), 0);
+            setScrollMetrics((prev) => {
+                if (prev.canScroll === canScroll && prev.maxScroll === maxScroll) return prev;
+                return { canScroll, maxScroll };
+            });
+            setPosition(element.scrollLeft);
+        };
+
+        const handleScroll = () => {
+            setScrollPosition();
+            updateMetrics();
+        };
 
-    useEffect(() => {
-        if (!ref.current) return;
+        const resizeObserver = new ResizeObserver(updateMetrics);
 
-        ref.current.addEventListener("scroll", setScrollPosition);
-        setScrollPosition();
+        element.addEventListener("scroll", handleScroll);
+        resizeObserver.observe(element);
+        updateMetrics();
 
         return () => {
-            ref.current?.removeEventListener("scroll", setScrollPosition);
+            element.removeEventListener("scroll", handleScroll);
+            resizeObserver.disconnect();
         };
     }, []);
 
···
             >
                 <TabsList
                     ref={ref}
-                    className="bg-inherit border-b-2 border-wamellow p-0 w-full justify-start rounded-none overflow-y-auto overflow-x-auto scrollbar-hide"
+                    className="bg-inherit border-b-2 border-wamellow p-0 w-full justify-start rounded-none overflow-y-auto overflow-x-auto scrollbar-none"
                 >
                     {tabs.map((tab) => (
                         <TabsTrigger
···
                 </TabsList>
             </Tabs>
 
-            {isScrollable && position > 0 && (
+            {scrollMetrics.canScroll && position > 0 && (
                 <Button
                     className="absolute bottom-2 left-0 backdrop-blur-lg"
                     onClick={() => scroll("left")}
···
                 </Button>
             )}
 
-            {isScrollable && ref.current && position < (ref.current.scrollWidth - (ref.current.clientWidth + 10)) && (
+            {scrollMetrics.canScroll && position < scrollMetrics.maxScroll && (
                 <Button
                     className="absolute bottom-2 right-0 backdrop-blur-lg"
                     onClick={() => scroll("right")}

components/modal.tsx

···
 import type { ApiError } from "@/typings";
 import { cn } from "@/utils/cn";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { HiFire } from "react-icons/hi";
 
 import Notice, { NoticeType } from "./notice";
···
     const [state, setState] = useState<State>(State.Idle);
     const [error, setError] = useState<string | null>(null);
 
-    useEffect(() => {
+    const reset = () => {
         setError(null);
         setState(State.Idle);
-    }, [isOpen]);
+    };
+
+    const handleClose = () => {
+        reset();
+        onClose();
+    };
 
     async function submit() {
         if (state === State.Loading) return;
         if (!onSubmit) {
-            onClose();
+            handleClose();
             return;
         }
 
-        setError(null);
+        reset();
         setState(State.Loading);
         const data = onSubmit?.();
 
         if (!data) {
-            onClose();
+            handleClose();
             return;
         }
 
···
         setState(State.Idle);
 
         if (res.ok) {
-            onClose();
+            handleClose();
             onSuccess?.(res.status === 204 ? null : await res.json());
             return;
         }
···
     return (
         <Dialog
             open={isOpen}
-            onOpenChange={(open) => !open && onClose()}
+            onOpenChange={(open) => {
+                if (!open) {
+                    handleClose();
+                }
+            }}
         >
             <DialogContent>
                 <DialogHeader>
···
                     {onSubmit && (
                         <Button
                             variant="link"
-                            onClick={() => state !== State.Loading && onClose()}
+                            onClick={() => state !== State.Loading && handleClose()}
                             className="hidden md:block ml-auto text-sm font-medium"
                             disabled={state !== State.Idle}
                         >

components/ui/input-base.tsx

···
 }: InputBaseProps) {
     const [focused, setFocused] = React.useState(false);
     const controlRef = React.useRef<HTMLElement>(null);
+    const handleClick = React.useCallback<React.MouseEventHandler<HTMLDivElement>>((event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        if (controlRef.current && event.currentTarget === event.target) {
+            controlRef.current.focus();
+        }
+    }, [onClick]);
 
     return (
         <InputBaseContext.Provider
···
         >
             <Primitive.div
                 data-slot="input-base"
-                onClick={composeEventHandlers(onClick, (event) => {
-                    if (controlRef.current && event.currentTarget === event.target) {
-                        controlRef.current.focus();
-                    }
-                })}
+                onClick={handleClick}
                 className={cn(
                     "border-input dark:bg-input/30 flex min-h-9 cursor-text items-center gap-2 rounded-lg border bg-transparent px-3 py-1 text-base shadow-2xs transition-[color,box-shadow] outline-hidden md:text-sm",
                     disabled && "pointer-events-none cursor-not-allowed opacity-50",