Validate dialNumber in useEffect hook (#255)

HubSpot · Jan 10, 2025 · 3f4d3c9 · 3f4d3c9
1 parent eb5c568
commit 3f4d3c9
Showing 1 changed file with 7 additions and 17 deletions.
diff --git a/demos/demo-react-ts/src/components/screens/KeypadScreen.tsx b/demos/demo-react-ts/src/components/screens/KeypadScreen.tsx
@@ -60,13 +60,9 @@ function KeypadScreen({
   const [isDialNumberValid, setIsDialNumberValid] = useState(false);
   const [toggleFromNumbers, setToggleFromNumbers] = useState(false);
 
-  const handleSetDialNumber = useCallback(
-    (value: string) => {
-      setDialNumber(value);
-      setIsDialNumberValid(validatePhoneNumber(value));
-    },
-    [setDialNumber]
-  );
+  useEffect(() => {
+    setIsDialNumberValid(validatePhoneNumber(dialNumber));
+  }, [dialNumber]);
 
   const handleLogout = () => {
     cti.userLoggedOut();
@@ -84,12 +80,12 @@ function KeypadScreen({
     target: { value },
   }: ChangeEvent<HTMLInputElement>) => {
     if (validateKeypadInput(value)) {
-      handleSetDialNumber(value);
+      setDialNumber(value);
     }
   };
 
   const addToDialNumber = (value: string) => {
-    handleSetDialNumber(dialNumber + value);
+    setDialNumber(dialNumber + value);
     dialNumberInput.current?.focus();
   };
 
@@ -125,19 +121,13 @@ function KeypadScreen({
         dialNumber.substring(cursorEnd);
     }
 
-    handleSetDialNumber(updatedToNumber);
+    setDialNumber(updatedToNumber);
     if (dialNumberInput.current) {
       dialNumberInput.current.value = updatedToNumber;
       dialNumberInput.current.setSelectionRange(cursorStart, cursorStart);
       dialNumberInput.current.focus();
     }
-  }, [
-    cursorEnd,
-    cursorStart,
-    dialNumber,
-    dialNumberInput,
-    handleSetDialNumber,
-  ]);
+  }, [cursorEnd, cursorStart, dialNumber, dialNumberInput, setDialNumber]);
 
   const handleSetAvailability = useCallback(
     (availability: Availability) => {