chore: startTransitionの導入

kufu · Sep 13, 2024 · c4f86c3 · c4f86c3
1 parent 6966078
commit c4f86c3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git 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
@@ -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) {