From c4f86c33d7ba4ee3d05b4d1e64ae12218555209d Mon Sep 17 00:00:00 2001
From: atzzCokeK <atsushi1230.sdi@gmail.com>
Date: Fri, 13 Sep 2024 11:15:40 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20startTransition=E3=81=AE=E5=B0=8E?=
 =?UTF-8?q?=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/Textarea/Textarea.tsx | 9 ++++++---
 packages/smarthr-ui/src/libs/debounce.ts                 | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index a2a5278499..2858b4b585 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -1,6 +1,7 @@
 import React, {
   ComponentPropsWithRef,
   forwardRef,
+  startTransition,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -140,12 +141,14 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const debouncedUpdateCount = useCallback(
       debounce((value) => {
-        setCount(getStringLength(value))
+        startTransition(() => {
+          setCount(getStringLength(value))
+        })
       }, 200),
       [],
     )
 
-    const handleOnChange = useCallback(
+    const handleChange = useCallback(
       (event: React.ChangeEvent<HTMLTextAreaElement>) => {
         onChange && onChange(event)
         maxLetters && debouncedUpdateCount(event.currentTarget.value)
@@ -197,7 +200,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
         {...props}
         {...textareaStyleProps}
         aria-describedby={actualMaxLettersId}
-        onChange={handleOnChange}
+        onChange={handleChange}
         ref={textareaRef}
         aria-invalid={error || undefined}
         rows={interimRows}
diff --git a/packages/smarthr-ui/src/libs/debounce.ts b/packages/smarthr-ui/src/libs/debounce.ts
index dad77d0e46..54ce2a552c 100644
--- a/packages/smarthr-ui/src/libs/debounce.ts
+++ b/packages/smarthr-ui/src/libs/debounce.ts
@@ -13,7 +13,7 @@ export const debounce = <T extends (...args: any[]) => void>(
   func: T,
   wait: number,
 ): ((...args: Parameters<T>) => void) => {
-  let timeoutId: NodeJS.Timeout | string | number | null = null
+  let timeoutId: ReturnType<typeof setTimeout> | null = null
 
   return function (...args: Parameters<T>) {
     if (timeoutId !== null) {