perf: 注文番号入力欄が重い問題を修正 (#70)

ricora · Nov 23, 2024 · 21cecd1 · 21cecd1
1 parent 92b9333
commit 21cecd1
Showing 1 changed file with 3 additions and 8 deletions.
diff --git a/app/routes/reception.tsx b/app/routes/reception.tsx
@@ -56,7 +56,7 @@ export default function Reception() {
   const actionData = useActionData<ActionData>()
   const { showMessage } = useMessage()
   const { isOpen, onOpen, onClose } = useDisclosure()
-  const [tableNumber, setTableNumber] = useState("")
+  const tableNumberRef = useRef<HTMLInputElement>(null)
 
   // const fetcher = useFetcher();
 
@@ -81,7 +81,7 @@ export default function Reception() {
       if (orderMemoRef.current) orderMemoRef.current.value = ""
       showMessage({ title: "注文しました", status: "success" })
       onClose()
-      setTableNumber("")
+      if (tableNumberRef.current) tableNumberRef.current.value = ""
     } else if (actionData?.success === false) {
       const errorMessage = actionData.error || "エラーが発生しました"
       showMessage({ title: errorMessage, status: "error" })
@@ -145,10 +145,6 @@ export default function Reception() {
     onOpen()
   }
 
-  const tableNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setTableNumber(e.target.value)
-  }
-
   return (
     <div>
       <Box left="10">
@@ -223,8 +219,7 @@ export default function Reception() {
                       <Input
                         type="number"
                         name="table_number"
-                        onChange={tableNumberChange}
-                        value={tableNumber}
+                        ref={tableNumberRef}
                         bg="gray.300"
                       />
                     </Text>