fix: hydration

packages/website-ue/src/components/AvatarControls/index.tsx

@@ -1,5 +1,5 @@
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useStrings } from "../../hooks/useStrings";
 import { Avatars } from "../../stores/avatars";
 import { TextField } from "../TextField";
@@ -9,23 +9,29 @@ export function AvatarControls() {
   const strings = useStrings();
   const search = useRef<HTMLInputElement>(null);
 
+  const onChange = useCallback(() => {
+    if (!search.current) return;
+
+    const trimmed = search.current.value.trim();
+
+    Avatars.mutate((draft) => {
+      if (trimmed.length === 0) {
+        draft.search = null;
+      } else {
+        draft.search = trimmed;
+      }
+    });
+  }, []);
+
+  useEffect(onChange, []);
+
   return (
     <div className="avatar-controls">
       <TextField
         ref={search}
         className="search"
         placeholder={strings.avatars.search}
-        onChange={(event) => {
-          const trimmed = event.target.value.trim();
-
-          Avatars.mutate((draft) => {
-            if (trimmed.length === 0) {
-              draft.search = null;
-            } else {
-              draft.search = trimmed;
-            }
-          });
-        }}
+        onLoad={onChange}
       >
         <MagnifyingGlassIcon />
       </TextField>