Optimize suffix icon calculation

Author: ArtyomVancyan

development/src/ant-phone/index.tsx

@@ -183,6 +183,18 @@ const PhoneInput = forwardRef(({
         setValue(formattedNumber);
     }, [countriesList, metadata, onMount, pattern, setValue, value])
 
+    const suffixIcon = useMemo(() => {
+        return enableArrow && (
+            <span role="img" className="anticon" style={{paddingLeft: 8}}>
+                <svg className="icon" viewBox="0 0 1024 1024"
+                     focusable="false" fill="currentColor" width="16" height="18">
+                    <path
+                        d="M848 368a48 48 0 0 0-81.312-34.544l-0.016-0.016-254.784 254.784-251.488-251.488a48 48 0 1 0-71.04 64.464l-0.128 0.128 288 288 0.016-0.016a47.84 47.84 0 0 0 34.544 14.688h0.224a47.84 47.84 0 0 0 34.544-14.688l0.016 0.016 288-288-0.016-0.016c8.32-8.624 13.44-20.368 13.44-33.312z"/>
+                </svg>
+            </span>
+        );
+    }, [enableArrow])
+
     const countriesSelect = useMemo(() => (
         <Select
             suffixIcon={null}
@@ -240,15 +252,7 @@ const PhoneInput = forwardRef(({
                         key={`${iso}_${mask}`}
                         label={<>
                             <div className={`flag ${iso}`}/>
-                            {enableArrow && (
-                                <span role="img" className="anticon" style={{paddingLeft: 8}}>
-                                    <svg className="icon" viewBox="0 0 1024 1024"
-                                         focusable="false" fill="currentColor" width="16" height="18">
-                                        <path
-                                            d="M848 368a48 48 0 0 0-81.312-34.544l-0.016-0.016-254.784 254.784-251.488-251.488a48 48 0 1 0-71.04 64.464l-0.128 0.128 288 288 0.016-0.016a47.84 47.84 0 0 0 34.544 14.688h0.224a47.84 47.84 0 0 0 34.544-14.688l0.016 0.016 288-288-0.016-0.016c8.32-8.624 13.44-20.368 13.44-33.312z"/>
-                                    </svg>
-                                </span>
-                            )}
+                            {suffixIcon}
                         </>}
                         children={<div className={`${prefixCls}-phone-input-select-item`}>
                             <div className={`flag ${iso}`}/>
@@ -258,7 +262,7 @@ const PhoneInput = forwardRef(({
                 )
             })}
         </Select>
-    ), [selectValue, query, enableArrow, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
+    ), [selectValue, suffixIcon, countryCode, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
 
     return (
         <div className={`${prefixCls}-phone-input-wrapper`}