@pdg/react-form 1.0.101 → 1.0.103

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React,{createContext,useContext,useMemo,useRef,useState,useCallback,useLayoutEffect,useEffect,useId}from'react';import classNames from'classnames';import {Box,Button,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,Icon,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Switch,Paper,Menu}from'@mui/material';import {empty,nextTick,notEmpty,equal,telNoAutoDash,ifUndefined,companyNoAutoDash,personalNoAutoDash}from'@pdg/util';import dayjs from'dayjs';import {PdgIcon,PdgIconText}from'@pdg/react-component';import {useAutoUpdateState,useFirstSkipEffect}from'@pdg/react-hook';import {useResizeDetector}from'react-resize-detector';import {NumericFormat}from'react-number-format';import {CheckBox,CheckBoxOutlineBlank,RadioButtonUnchecked,RadioButtonChecked}from'@mui/icons-material';import {Editor}from'@tinymce/tinymce-react';import CircularProgress$1 from'@mui/material/CircularProgress';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker,StaticDateTimePicker,DesktopDateTimePicker}from'@mui/x-date-pickers';import SimpleBar from'simplebar-react';import'dayjs/locale/ko';/******************************************************************************
+import React,{createContext,useContext,useMemo,useRef,useState,useCallback,useLayoutEffect,useEffect,useId}from'react';import classNames from'classnames';import {Box,Button,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,Icon,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Switch,Paper,Menu}from'@mui/material';import {empty,nextTick,notEmpty,equal,telNoAutoDash,ifUndefined,companyNoAutoDash,personalNoAutoDash}from'@pdg/util';import dayjs from'dayjs';import {PdgIcon,PdgIconText}from'@pdg/react-component';import {useAutoUpdateState,useAutoUpdateRefState,useFirstSkipEffect}from'@pdg/react-hook';import {useResizeDetector}from'react-resize-detector';import {NumericFormat}from'react-number-format';import {CheckBox,CheckBoxOutlineBlank,RadioButtonUnchecked,RadioButtonChecked}from'@mui/icons-material';import {Editor}from'@tinymce/tinymce-react';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker,StaticDateTimePicker,DesktopDateTimePicker}from'@mui/x-date-pickers';import SimpleBar from'simplebar-react';import'dayjs/locale/ko';/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -885,6 +885,7 @@ FormRow.defaultProps = FormRowDefaultProps;var FormColDefaultProps = {};var Form
      * Memo
      * ******************************************************************************************************************/
     var gap = useMemo(function () { return (initGap == null ? formFormColGap : initGap); }, [formFormColGap, initGap]);
+    var style = useMemo(function () { return (hidden ? __assign(__assign({}, initStyle), { display: 'none' }) : initStyle); }, [hidden, initStyle]);
     /********************************************************************************************************************
      * ResizeDetector
      * ******************************************************************************************************************/
@@ -893,17 +894,6 @@ FormRow.defaultProps = FormRowDefaultProps;var FormColDefaultProps = {};var Form
         handleWidth: true,
         handleHeight: false,
     }).width;
-    /********************************************************************************************************************
-     * State - style
-     * ******************************************************************************************************************/
-    var style = useAutoUpdateState(useCallback(function () {
-        if (hidden) {
-            return __assign(__assign({}, initStyle), { display: 'none' });
-        }
-        else {
-            return initStyle;
-        }
-    }, [initStyle, hidden]))[0];
     /********************************************************************************************************************
      * LayoutEffect
      * ******************************************************************************************************************/
@@ -1064,10 +1054,9 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
      * ******************************************************************************************************************/
     var _d = useAutoUpdateState(initError), error = _d[0], setError = _d[1];
     var _e = useState(), errorHelperText = _e[0], setErrorHelperText = _e[1];
-    var _f = useState(false), showClear = _f[0], setShowClear = _f[1];
-    var _g = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _g[0], setDisabled = _g[1];
-    var _h = useAutoUpdateState(initHidden), hidden = _h[0], setHidden = _h[1];
-    var _j = useAutoUpdateState(initData), data = _j[0], setData = _j[1];
+    var _f = useAutoUpdateRefState(initData), dataRef = _f[0], setData = _f[2];
+    var _g = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _g[0], disabled = _g[1], setDisabled = _g[2];
+    var _h = useAutoUpdateRefState(initHidden), hiddenRef = _h[0], hidden = _h[1], setHidden = _h[2];
     /********************************************************************************************************************
      * Memo - muiInputLabelProps
      * ******************************************************************************************************************/
@@ -1119,12 +1108,6 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
             React.createElement(PdgIcon, { style: { verticalAlign: 'middle', marginRight: 4 } }, labelIcon),
             React.createElement("span", { style: { verticalAlign: 'middle' } }, initLabel))) : (initLabel);
     }, [initLabel, labelIcon]);
-    /********************************************************************************************************************
-     * Function - getFinalValue
-     * ******************************************************************************************************************/
-    var getFinalValue = useCallback(function (value) {
-        return onValue ? onValue(value) : value;
-    }, [onValue]);
     /********************************************************************************************************************
      * Function - setErrorErrorHelperText
      * ******************************************************************************************************************/
@@ -1165,28 +1148,23 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
     /********************************************************************************************************************
      * State - value
      * ******************************************************************************************************************/
-    var _k = useState(function () { return getFinalValue(initValue); }), value = _k[0], setValue = _k[1];
-    var changeValue = useCallback(function (newValue) {
-        if (!equal(value, newValue)) {
-            setValue(newValue);
-            nextTick(function () {
-                if (error)
-                    validate(newValue);
-                if (onChange)
-                    onChange(newValue);
-                if (!noFormValueItem) {
-                    onValueChange(name, newValue);
-                }
-            });
-        }
-    }, [error, name, noFormValueItem, onChange, onValueChange, validate, value]);
+    var getFinalValue = useCallback(function (newValue) {
+        return onValue ? onValue(newValue) : newValue;
+    }, [onValue]);
+    var _j = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _j[0], value = _j[1], setValue = _j[2];
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(initValue));
-    }, [initValue]);
-    useEffect(function () {
-        setShowClear(clear ? notEmpty(value) : false);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        if (error)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        if (!noFormValueItem) {
+            onValueChange(name, value);
+        }
     }, [value]);
+    /********************************************************************************************************************
+     * Memo
+     * ******************************************************************************************************************/
+    var showClear = useMemo(function () { return (clear ? notEmpty(value) : false); }, [clear, value]);
     /********************************************************************************************************************
      * Function - focus
      * ******************************************************************************************************************/
@@ -1215,8 +1193,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
             muiInputProps.endAdornment = (React.createElement(React.Fragment, null,
                 clear && !readOnly && !disabled && (React.createElement(InputAdornment, { className: classNames('clear-icon-button-wrap', showClear && 'show'), position: 'end' },
                     React.createElement(IconButton, { className: 'clear-icon-button', size: 'small', tabIndex: -1, onClick: function () {
-                            var finalValue = getFinalValue('');
-                            changeValue(finalValue);
+                            var finalValue = setValue('');
                             focus();
                             if (!noFormValueItem) {
                                 nextTick(function () {
@@ -1231,12 +1208,10 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
         }
         return muiInputProps;
     }, [
-        changeValue,
         clear,
         disabled,
         endAdornment,
         focus,
-        getFinalValue,
         icon,
         initMuiInputProps,
         name,
@@ -1244,6 +1219,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
         onRequestSearchSubmit,
         onValueChangeByUser,
         readOnly,
+        setValue,
         showClear,
         startAdornment,
     ]);
@@ -1252,42 +1228,29 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
         if (ref || (!noFormValueItem && onAddValueItem)) {
-            var lastValue_1 = value;
-            var lastData_1 = data;
-            var lastDisabled_1 = !!disabled;
-            var lastHidden_1 = !!hidden;
             var commands = {
                 getType: function () { return 'default'; },
                 getName: function () { return name; },
                 getReset: function () { return getFinalValue(initValue); },
-                reset: function () {
-                    lastValue_1 = getFinalValue(initValue);
-                    changeValue(lastValue_1);
-                },
-                getValue: function () { return lastValue_1; },
-                setValue: function (value) {
-                    lastValue_1 = getFinalValue(value);
-                    changeValue(lastValue_1);
-                },
-                getData: function () { return lastData_1; },
+                reset: function () { return setValue(initValue); },
+                getValue: function () { return valueRef.current; },
+                setValue: function (value) { return setValue(value); },
+                getData: function () { return dataRef.current; },
                 setData: function (data) {
-                    lastData_1 = data;
                     setData(data);
                 },
                 isExceptValue: function () { return !!exceptValue; },
-                isDisabled: function () { return lastDisabled_1; },
+                isDisabled: function () { return !!disabledRef.current; },
                 setDisabled: function (disabled) {
-                    lastDisabled_1 = disabled;
                     setDisabled(disabled);
                 },
-                isHidden: function () { return lastHidden_1; },
+                isHidden: function () { return !!hiddenRef.current; },
                 setHidden: function (hidden) {
-                    lastHidden_1 = hidden;
                     setHidden(hidden);
                 },
                 focus: focus,
                 focusValidate: focus,
-                validate: function () { return validate(lastValue_1); },
+                validate: function () { return validate(valueRef.current); },
                 setError: function (error, errorText) {
                     return setErrorErrorHelperText(error, error ? errorText : undefined);
                 },
@@ -1316,33 +1279,32 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
             };
         }
     }, [
-        name,
-        initValue,
-        value,
-        data,
-        getFinalValue,
+        dataRef,
+        disabledRef,
         exceptValue,
-        disabled,
         focus,
-        validate,
-        ref,
+        getFinalValue,
+        hiddenRef,
+        id,
+        initValue,
+        name,
         noFormValueItem,
         onAddValueItem,
         onRemoveValueItem,
-        id,
+        ref,
+        setData,
         setDisabled,
         setErrorErrorHelperText,
-        setData,
-        hidden,
         setHidden,
-        changeValue,
+        setValue,
+        validate,
+        valueRef,
     ]);
     /********************************************************************************************************************
      * Event Handler
      * ******************************************************************************************************************/
     var handleChange = useCallback(function (e) {
-        var finalValue = getFinalValue(e.target.value);
-        changeValue(finalValue);
+        var finalValue = setValue(e.target.value);
         if (!noFormValueItem) {
             nextTick(function () {
                 onValueChangeByUser(name, finalValue);
@@ -1351,13 +1313,13 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
                 }
             });
         }
-    }, [getFinalValue, changeValue, noFormValueItem, onValueChangeByUser, name, select, onRequestSearchSubmit]);
+    }, [setValue, noFormValueItem, onValueChangeByUser, name, select, onRequestSearchSubmit]);
     var handleBlur = useCallback(function (e) {
         if (error)
-            validate(value);
+            validate(valueRef.current);
         if (onBlur)
             onBlur(e);
-    }, [error, value, validate, onBlur]);
+    }, [error, validate, valueRef, onBlur]);
     var handleKeyDown = useCallback(function (e) {
         if (['Enter'].includes(e.key) &&
             !select &&
@@ -1365,11 +1327,11 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
             !noFormValueItem) {
             e.preventDefault();
             e.stopPropagation();
-            onRequestSearchSubmit(name, value);
+            onRequestSearchSubmit(name, valueRef.current);
         }
         if (onKeyDown)
             onKeyDown(e);
-    }, [select, multiline, disableReturnKey, noFormValueItem, onKeyDown, onRequestSearchSubmit, name, value]);
+    }, [select, multiline, disableReturnKey, noFormValueItem, onKeyDown, onRequestSearchSubmit, name, valueRef]);
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
@@ -1399,53 +1361,12 @@ styleInject(css_248z$j);var FormTag = React.forwardRef(function (_a, ref) {
      * ******************************************************************************************************************/
     var fullWidth = useAutoUpdateState(initFullWidth == null ? formFullWidth : initFullWidth)[0];
     /********************************************************************************************************************
-     * Function - getFinalValue
-     * ******************************************************************************************************************/
-    var getFinalValue = useCallback(function (value) {
-        var finalValue;
-        if (value instanceof Set) {
-            finalValue = Array.from(value);
-        }
-        else {
-            var valueSet_1 = new Set();
-            (value || []).forEach(function (value) { return valueSet_1.add(value); });
-            finalValue = Array.from(valueSet_1);
-        }
-        return onValue ? onValue(finalValue) : finalValue;
-    }, [onValue]);
-    /********************************************************************************************************************
-     * State - value
+     * State
      * ******************************************************************************************************************/
-    var _c = useState(function () { return getFinalValue(initValue || []); }), value = _c[0], setValue = _c[1];
-    var _d = useState(function () { return new Set(getFinalValue(initValue || [])); }), valueSet = _d[0], setValueSet = _d[1];
-    useFirstSkipEffect(function () {
-        setValue(getFinalValue(initValue || []));
-        setValueSet(new Set(getFinalValue(initValue || [])));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [initValue]);
-    useFirstSkipEffect(function () {
-        if (error)
-            validate(value);
-        if (onChange)
-            onChange(value);
-        onValueChange(name, value);
-    }, [value]);
-    //------------------------------------------------------------------------------------------------------------------
-    var _e = useState(''), inputValue = _e[0], setInputValue = _e[1];
-    var _f = useAutoUpdateState(initError), error = _f[0], setError = _f[1];
-    var _g = useState(), errorHelperText = _g[0], setErrorHelperText = _g[1];
+    var _c = useState(''), inputValue = _c[0], setInputValue = _c[1];
+    var _d = useAutoUpdateState(initError), error = _d[0], setError = _d[1];
+    var _e = useState(), errorHelperText = _e[0], setErrorHelperText = _e[1];
     var disabled = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled)[0];
-    /********************************************************************************************************************
-     * Effect
-     * ******************************************************************************************************************/
-    useEffect(function () {
-        if (!equal(value, initValue)) {
-            if (onChange)
-                onChange(value);
-            onValueChange(name, value);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     /********************************************************************************************************************
      * Function - setErrorErrorHelperText
      * ******************************************************************************************************************/
@@ -1471,6 +1392,38 @@ styleInject(css_248z$j);var FormTag = React.forwardRef(function (_a, ref) {
         setErrorErrorHelperText(false, undefined);
         return true;
     }, [required, onValidate, setErrorErrorHelperText]);
+    var getFinalValue = useCallback(function (value) {
+        var finalValue = value === undefined ? [] : value;
+        if (finalValue instanceof Set) {
+            finalValue = Array.from(finalValue);
+        }
+        else {
+            var finalValueSet_1 = new Set();
+            (finalValue || []).forEach(function (finalValue) { return finalValueSet_1.add(finalValue); });
+            finalValue = Array.from(finalValueSet_1);
+        }
+        return onValue ? onValue(finalValue) : finalValue;
+    }, [onValue]);
+    var _f = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _f[0], value = _f[1], setValue = _f[2];
+    var valueSet = useMemo(function () { return new Set(value); }, [value]);
+    useFirstSkipEffect(function () {
+        if (error)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
+    /********************************************************************************************************************
+     * Effect
+     * ******************************************************************************************************************/
+    useEffect(function () {
+        if (!equal(value, initValue)) {
+            if (onChange)
+                onChange(value);
+            onValueChange(name, value);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     /********************************************************************************************************************
      * Function - getExtraCommands
      * ******************************************************************************************************************/
@@ -1484,19 +1437,8 @@ styleInject(css_248z$j);var FormTag = React.forwardRef(function (_a, ref) {
      * Function - getCommands
      * ******************************************************************************************************************/
     var getCommands = useCallback(function (baseCommands) {
-        var lastValue = value;
-        return __assign(__assign(__assign({}, baseCommands), { getReset: function () { return getFinalValue(initValue || []); }, reset: function () {
-                lastValue = getFinalValue(initValue || []);
-                setValue(lastValue);
-            }, getValue: function () { return lastValue; }, setValue: function (newValue) {
-                var finalValue = getFinalValue(newValue);
-                if (!equal(lastValue, finalValue)) {
-                    lastValue = finalValue;
-                    setValueSet(new Set(lastValue));
-                    setValue(lastValue);
-                }
-            }, validate: function () { return validate(value); } }), getExtraCommands());
-    }, [value, getExtraCommands, getFinalValue, initValue, setValue, validate]);
+        return __assign(__assign(__assign({}, baseCommands), { getReset: function () { return getFinalValue(initValue); }, reset: function () { return setValue(initValue); }, getValue: function () { return valueRef.current; }, setValue: function (newValue) { return setValue(newValue); }, validate: function () { return validate(valueRef.current); } }), getExtraCommands());
+    }, [getExtraCommands, getFinalValue, initValue, setValue, valueRef, validate]);
     /********************************************************************************************************************
      * Function - appendTag, removeTag
      * ******************************************************************************************************************/
@@ -1506,27 +1448,24 @@ styleInject(css_248z$j);var FormTag = React.forwardRef(function (_a, ref) {
         }
         else {
             valueSet.add(tag);
-            Array.from(valueSet);
-            var finalValue_1 = getFinalValue(valueSet);
-            setValue(finalValue_1);
+            var finalValue_1 = setValue(valueSet);
             nextTick(function () {
                 setInputValue('');
                 onValueChangeByUser(name, finalValue_1);
                 onRequestSearchSubmit(name, finalValue_1);
             });
         }
-    }, [valueSet, getFinalValue, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
+    }, [valueSet, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
     var removeTag = useCallback(function (tag) {
         if (valueSet.has(tag)) {
             valueSet.delete(tag);
-            var finalValue_2 = getFinalValue(valueSet);
-            setValue(finalValue_2);
+            var finalValue_2 = setValue(valueSet);
             nextTick(function () {
                 onValueChangeByUser(name, finalValue_2);
                 onRequestSearchSubmit(name, finalValue_2);
             });
         }
-    }, [valueSet, getFinalValue, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
+    }, [valueSet, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
     /********************************************************************************************************************
      * Event Handler
      * ******************************************************************************************************************/
@@ -2169,21 +2108,21 @@ styleInject(css_248z$f);var FormSelect = ToForwardRefExoticComponent(AutoTypeFor
         }
     }, [items]);
     /********************************************************************************************************************
-     * State - inputLabelProps
+     * inputLabelProps
      * ******************************************************************************************************************/
-    var inputLabelProps = useAutoUpdateState(useCallback(function () {
+    var inputLabelProps = useMemo(function () {
         if (hasEmptyValue || (!hasEmptyValue && placeholder)) {
             return __assign(__assign({}, initInputLabelProps), { shrink: true });
         }
         else {
             return initInputLabelProps;
         }
-    }, [initInputLabelProps, hasEmptyValue, placeholder]))[0];
+    }, [hasEmptyValue, initInputLabelProps, placeholder]);
     /********************************************************************************************************************
      * Function - getFinalValue
      * ******************************************************************************************************************/
-    var getFinalValue = useCallback(function (value) {
-        var finalValue = value == null ? '' : value;
+    var getFinalValue = useCallback(function (newValue) {
+        var finalValue = newValue == null ? '' : newValue;
         if (multiple) {
             if (!Array.isArray(finalValue)) {
                 if (empty(finalValue)) {
@@ -2228,37 +2167,23 @@ styleInject(css_248z$f);var FormSelect = ToForwardRefExoticComponent(AutoTypeFor
             }
         }
         finalValue = onValue ? onValue(finalValue) : finalValue;
-        return equal(value, finalValue) ? value : finalValue;
+        return equal(newValue, finalValue) ? newValue : finalValue;
     }, [multiple, formValueSeparator, itemsValues, onValue]);
     /********************************************************************************************************************
      * State - value
      * ******************************************************************************************************************/
-    var _h = useState(function () { return getFinalValue(initValue); }), value = _h[0], setValue = _h[1];
+    var _h = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _h[0], value = _h[1], setValue = _h[2];
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
-    var changeValue = useCallback(function (newValue) {
-        if (!equal(value, newValue)) {
-            setValue(newValue);
-            nextTick(function () {
-                if (onChange)
-                    onChange(newValue);
-                onValueChange(name, newValue);
-            });
-        }
-    }, [name, onChange, onValueChange, value]);
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(initValue));
-    }, [initValue]);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(value));
+        setValue(valueRef.current);
     }, [multiple]);
-    /********************************************************************************************************************
-     * State - isSelectedPlaceholder
-     * ******************************************************************************************************************/
-    var isSelectedPlaceholder = useAutoUpdateState(useCallback(function () {
-        return notEmpty(items) && empty(value) && !!placeholder && !hasEmptyValue;
-    }, [items, value, placeholder, hasEmptyValue]))[0];
     /********************************************************************************************************************
      * Effect
      * ******************************************************************************************************************/
@@ -2275,6 +2200,7 @@ styleInject(css_248z$f);var FormSelect = ToForwardRefExoticComponent(AutoTypeFor
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
+    var isSelectedPlaceholder = useMemo(function () { return notEmpty(items) && empty(value) && !!placeholder && !hasEmptyValue; }, [hasEmptyValue, items, placeholder, value]);
     var selectProps = useMemo(function () {
         var _a;
         var finalSelectProps = __assign(__assign({}, initSelectProps), { displayEmpty: true, multiple: !!multiple, value: value });
@@ -2285,12 +2211,12 @@ styleInject(css_248z$f);var FormSelect = ToForwardRefExoticComponent(AutoTypeFor
                 }
                 else {
                     return (React.createElement(Box, { className: 'selected-list', sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, Array.isArray(selected) &&
-                        selected.map(function (value) {
+                        selected.map(function (selectedValue) {
                             if (isSelectedPlaceholder) {
-                                return React.createElement(Chip, { key: value || '$$$EmptyValuePlaceholder$$$', label: 'hahaha', size: 'small' });
+                                return React.createElement(Chip, { key: selectedValue || '$$$EmptyValuePlaceholder$$$', label: 'hahaha', size: 'small' });
                             }
                             else {
-                                return React.createElement(Chip, { key: value, label: itemValueLabels["".concat(value)], size: 'small' });
+                                return React.createElement(Chip, { key: selectedValue, label: itemValueLabels["".concat(selectedValue)], size: 'small' });
                             }
                         })));
                 }
@@ -2306,20 +2232,13 @@ styleInject(css_248z$f);var FormSelect = ToForwardRefExoticComponent(AutoTypeFor
      * Function - getExtraCommands
      * ******************************************************************************************************************/
     var getBaseCommands = useCallback(function () {
-        var lastValue = value;
         return {
             getReset: function () { return getFinalValue(initValue); },
-            reset: function () {
-                lastValue = getFinalValue(initValue);
-                changeValue(lastValue);
-            },
-            getValue: function () { return lastValue; },
-            setValue: function (value) {
-                lastValue = getFinalValue(value);
-                changeValue(lastValue);
-            },
+            reset: function () { return setValue(initValue); },
+            getValue: function () { return valueRef.current; },
+            setValue: function (value) { return setValue(value); },
         };
-    }, [value, getFinalValue, initValue, changeValue]);
+    }, [getFinalValue, initValue, setValue, valueRef]);
     var getExtraCommands = useCallback(function () {
         var lastItems = items;
         var lastLoading = loading;
@@ -2358,7 +2277,7 @@ styleInject(css_248z$f);var FormSelect = ToForwardRefExoticComponent(AutoTypeFor
         onAddValueItem(id, __assign(__assign(__assign({}, commands), getBaseCommands()), getExtraCommands()));
     }, [onAddValueItem, getBaseCommands, getExtraCommands]);
     var handleChange = function (newValue) {
-        changeValue(getFinalValue(newValue));
+        setValue(newValue);
     };
     var handleValue = useCallback(function (value) {
         return getFinalValue(value);
@@ -2647,17 +2566,38 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _d = useAutoUpdateState(initValue), value = _d[0], setValue = _d[1];
-    var _e = useAutoUpdateState(initUncheckedValue), uncheckedValue = _e[0], setUncheckedValue = _e[1];
-    var _f = useAutoUpdateState(initError), error = _f[0], setError = _f[1];
-    var _g = useState(), errorHelperText = _g[0], setErrorHelperText = _g[1];
-    var _h = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _h[0], setDisabled = _h[1];
-    var _j = useAutoUpdateState(initHidden), hidden = _j[0], setHidden = _j[1];
-    var _k = useAutoUpdateState(initData), data = _k[0], setData = _k[1];
+    var _d = useAutoUpdateState(initError), error = _d[0], setError = _d[1];
+    var _e = useState(), errorHelperText = _e[0], setErrorHelperText = _e[1];
+    var _f = useAutoUpdateRefState(initData), dataRef = _f[0], setData = _f[2];
+    var _g = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _g[0], disabled = _g[1], setDisabled = _g[2];
+    var _h = useAutoUpdateRefState(initHidden), hiddenRef = _h[0], hidden = _h[1], setHidden = _h[2];
+    var _j = useAutoUpdateRefState(initUncheckedValue, useCallback(function (newUncheckedValue) { return (newUncheckedValue == null ? 0 : newUncheckedValue); }, [])), uncheckedValueRef = _j[0], setUncheckedValue = _j[2];
+    var _k = useAutoUpdateRefState(initValue, useCallback(function (newValue) { return (newValue == null ? 0 : newValue); }, [])), valueRef = _k[0], setValue = _k[2];
+    /********************************************************************************************************************
+     * Function - setErrorErrorHelperText
+     * ******************************************************************************************************************/
+    var setErrorErrorHelperText = useCallback(function (error, errorHelperText) {
+        setError(error);
+        setErrorHelperText(errorHelperText);
+    }, [setError]);
+    /********************************************************************************************************************
+     * Function - validate
+     * ******************************************************************************************************************/
+    var validate = useCallback(function (checked) {
+        if (onValidate) {
+            var onValidateResult = onValidate(checked);
+            if (onValidateResult != null && onValidateResult !== true) {
+                setErrorErrorHelperText(true, onValidateResult);
+                return false;
+            }
+        }
+        setErrorErrorHelperText(false, undefined);
+        return true;
+    }, [onValidate, setErrorErrorHelperText]);
     /********************************************************************************************************************
      * State - checked
      * ******************************************************************************************************************/
-    var _l = useAutoUpdateState(!!initChecked), checked = _l[0], setChecked = _l[1];
+    var _l = useAutoUpdateRefState(initChecked, useCallback(function (newChecked) { return !!newChecked; }, [])), checkedRef = _l[0], checked = _l[1], setChecked = _l[2];
     useFirstSkipEffect(function () {
         if (error)
             validate(checked);
@@ -2687,76 +2627,28 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
             (_d = actionRef.current) === null || _d === void 0 ? void 0 : _d.focusVisible();
         }
     }, [initInputRef, inputRef, initAction, actionRef]);
-    /********************************************************************************************************************
-     * Function - setErrorErrorHelperText
-     * ******************************************************************************************************************/
-    var setErrorErrorHelperText = useCallback(function (error, errorHelperText) {
-        setError(error);
-        setErrorHelperText(errorHelperText);
-    }, [setError]);
-    /********************************************************************************************************************
-     * Function - validate
-     * ******************************************************************************************************************/
-    var validate = useCallback(function (checked) {
-        if (onValidate) {
-            var onValidateResult = onValidate(checked);
-            if (onValidateResult != null && onValidateResult !== true) {
-                setErrorErrorHelperText(true, onValidateResult);
-                return false;
-            }
-        }
-        setErrorErrorHelperText(false, undefined);
-        return true;
-    }, [onValidate, setErrorErrorHelperText]);
     /********************************************************************************************************************
      * Commands
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
-        var lastChecked = checked;
-        var lastValue = value == null ? 1 : value;
-        var lastData = data;
-        var lastUncheckedValue = uncheckedValue == null ? 0 : uncheckedValue;
-        var lastDisabled = !!disabled;
-        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormCheckbox'; },
             getName: function () { return name; },
             getReset: function () { return !!initChecked; },
-            reset: function () {
-                lastChecked = !!initChecked;
-                setChecked(lastChecked);
-            },
-            getValue: function () { return lastValue; },
-            setValue: function (value) {
-                lastValue = value;
-                setValue(value);
-            },
-            getData: function () { return lastData; },
-            setData: function (data) {
-                lastData = data;
-                setData(data);
-            },
-            getUncheckedValue: function () { return lastUncheckedValue; },
-            setUncheckedValue: function (uncheckedValue) {
-                lastUncheckedValue = uncheckedValue;
-                setUncheckedValue(lastUncheckedValue);
-            },
-            getChecked: function () { return lastChecked; },
-            setChecked: function (checked) {
-                lastChecked = checked;
-                setChecked(lastChecked);
-            },
+            reset: function () { return setChecked(initChecked); },
+            getValue: function () { return valueRef.current; },
+            setValue: function (value) { return setValue(value); },
+            getData: function () { return dataRef.current; },
+            setData: function (data) { return setData(data); },
+            getUncheckedValue: function () { return uncheckedValueRef.current; },
+            setUncheckedValue: function (uncheckedValue) { return setUncheckedValue(uncheckedValue); },
+            getChecked: function () { return checkedRef.current; },
+            setChecked: function (checked) { return setChecked(checked); },
             isExceptValue: function () { return !!exceptValue; },
-            isDisabled: function () { return lastDisabled; },
-            setDisabled: function (disabled) {
-                lastDisabled = disabled;
-                setDisabled(disabled);
-            },
-            isHidden: function () { return lastHidden; },
-            setHidden: function (hidden) {
-                lastHidden = hidden;
-                setHidden(hidden);
-            },
+            isDisabled: function () { return !!disabledRef.current; },
+            setDisabled: function (disabled) { return setDisabled(disabled); },
+            isHidden: function () { return !!hiddenRef.current; },
+            setHidden: function (hidden) { return setHidden(hidden); },
             focus: focus,
             focusValidate: focus,
             validate: function () { return validate(checked); },
@@ -2785,28 +2677,29 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
             }
         };
     }, [
-        ref,
-        onAddValueItem,
-        onRemoveValueItem,
-        focus,
-        name,
-        initChecked,
         checked,
-        value,
-        uncheckedValue,
+        checkedRef,
+        dataRef,
+        disabledRef,
         exceptValue,
-        disabled,
-        validate,
+        focus,
+        hiddenRef,
         id,
+        initChecked,
+        name,
+        onAddValueItem,
+        onRemoveValueItem,
+        ref,
         setChecked,
-        setValue,
-        setUncheckedValue,
+        setData,
         setDisabled,
         setErrorErrorHelperText,
-        data,
-        setData,
-        hidden,
         setHidden,
+        setUncheckedValue,
+        setValue,
+        uncheckedValueRef,
+        validate,
+        valueRef,
     ]);
     /********************************************************************************************************************
      * Event Handler
@@ -2874,16 +2767,16 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _d = useAutoUpdateState(initItems), items = _d[0], setItems = _d[1];
-    var _e = useAutoUpdateState(initError), error = _e[0], setError = _e[1];
-    var _f = useState(), errorHelperText = _f[0], setErrorHelperText = _f[1];
-    var _g = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _g[0], setDisabled = _g[1];
-    var _h = useAutoUpdateState(initHidden), hidden = _h[0], setHidden = _h[1];
-    var _j = useState(false), isOnGetItemLoading = _j[0], setIsOnGetItemLoading = _j[1];
-    var _k = useAutoUpdateState(initLoading), loading = _k[0], setLoading = _k[1];
-    var _l = useAutoUpdateState(initWidth || '100%'), width = _l[0], setWidth = _l[1];
-    var _m = useState(), formColWrapRect = _m[0], setFormColWrapRect = _m[1];
-    var _o = useAutoUpdateState(initData), data = _o[0], setData = _o[1];
+    var _d = useAutoUpdateState(initError), error = _d[0], setError = _d[1];
+    var _e = useState(), errorHelperText = _e[0], setErrorHelperText = _e[1];
+    var _f = useState(false), isOnGetItemLoading = _f[0], setIsOnGetItemLoading = _f[1];
+    var _g = useAutoUpdateState(initWidth || '100%'), width = _g[0], setWidth = _g[1];
+    var _h = useState(), formColWrapRect = _h[0], setFormColWrapRect = _h[1];
+    var _j = useAutoUpdateRefState(initData), dataRef = _j[0], setData = _j[2];
+    var _k = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _k[0], disabled = _k[1], setDisabled = _k[2];
+    var _l = useAutoUpdateRefState(initHidden), hiddenRef = _l[0], hidden = _l[1], setHidden = _l[2];
+    var _m = useAutoUpdateRefState(initLoading), loadingRef = _m[0], loading = _m[1], setLoading = _m[2];
+    var _o = useAutoUpdateRefState(initItems), itemsRef = _o[0], items = _o[1], setItems = _o[2];
     /********************************************************************************************************************
      * State - radioGroupNoWrapRect (ResizeDetector)
      * ******************************************************************************************************************/
@@ -2900,12 +2793,6 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
      * State - height (ResizeDetector)
      * ******************************************************************************************************************/
     var _q = useResizeDetector(), height = _q.height, resizeHeightDetectorRef = _q.ref;
-    /********************************************************************************************************************
-     * Function - getFinalValue
-     * ******************************************************************************************************************/
-    var getFinalValue = useCallback(function (value) {
-        return onValue ? onValue(value) : value;
-    }, [onValue]);
     /********************************************************************************************************************
      * Function - setErrorErrorHelperText
      * ******************************************************************************************************************/
@@ -2934,22 +2821,17 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
     /********************************************************************************************************************
      * State - value
      * ******************************************************************************************************************/
-    var _r = useState(function () { return getFinalValue(initValue); }), value = _r[0], setValue = _r[1];
-    var changeValue = useCallback(function (newValue) {
-        if (!equal(value, newValue)) {
-            setValue(newValue);
-            nextTick(function () {
-                if (error)
-                    validate(newValue);
-                if (onChange)
-                    onChange(newValue);
-                onValueChange(name, newValue);
-            });
-        }
-    }, [error, name, onChange, onValueChange, validate, value]);
+    var getFinalValue = useCallback(function (value) {
+        return onValue ? onValue(value) : value;
+    }, [onValue]);
+    var _r = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _r[0], value = _r[1], setValue = _r[2];
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(initValue));
-    }, [initValue]);
+        if (error)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
@@ -3023,57 +2905,30 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
      * Commands
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
-        var lastValue = value;
-        var lastData = data;
-        var lastItems = items;
-        var lastLoading = loading;
-        var lastDisabled = !!disabled;
-        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormRadioGroup'; },
             getName: function () { return name; },
             getReset: function () { return getFinalValue(initValue); },
-            reset: function () {
-                lastValue = getFinalValue(initValue);
-                changeValue(lastValue);
-            },
-            getValue: function () { return lastValue; },
-            setValue: function (value) {
-                lastValue = getFinalValue(value);
-                changeValue(lastValue);
-            },
-            getData: function () { return lastData; },
-            setData: function (data) {
-                lastData = data;
-                setData(data);
-            },
+            reset: function () { return setValue(initValue); },
+            getValue: function () { return valueRef.current; },
+            setValue: function (value) { return setValue(value); },
+            getData: function () { return dataRef.current; },
+            setData: function (data) { return setData(data); },
             isExceptValue: function () { return !!exceptValue; },
-            isDisabled: function () { return lastDisabled; },
-            setDisabled: function (disabled) {
-                lastDisabled = disabled;
-                setDisabled(disabled);
-            },
-            isHidden: function () { return lastHidden; },
-            setHidden: function (hidden) {
-                lastHidden = hidden;
-                setHidden(hidden);
-            },
+            isDisabled: function () { return !!disabledRef.current; },
+            setDisabled: function (disabled) { return setDisabled(disabled); },
+            isHidden: function () { return !!hiddenRef.current; },
+            setHidden: function (hidden) { return setHidden(hidden); },
             focus: focus,
             focusValidate: focus,
-            validate: function () { return validate(value); },
+            validate: function () { return validate(valueRef.current); },
             setError: function (error, errorHelperText) {
                 return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
             },
-            getItems: function () { return lastItems; },
-            setItems: function (items) {
-                lastItems = items;
-                setItems(lastItems);
-            },
-            getLoading: function () { return !!lastLoading; },
-            setLoading: function (loading) {
-                lastLoading = loading;
-                setLoading(lastLoading);
-            },
+            getItems: function () { return itemsRef.current; },
+            setItems: function (items) { return setItems(items); },
+            getLoading: function () { return !!loadingRef.current; },
+            setLoading: function (loading) { return setLoading(loading); },
         };
         onAddValueItem(id, commands);
         if (ref) {
@@ -3096,29 +2951,29 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
             }
         };
     }, [
-        name,
-        initValue,
-        value,
-        getFinalValue,
+        dataRef,
+        disabledRef,
         exceptValue,
-        disabled,
         focus,
-        validate,
-        items,
-        loading,
-        ref,
-        onAddValueItem,
-        onRemoveValueItem,
+        getFinalValue,
+        hiddenRef,
         id,
+        initValue,
+        itemsRef,
+        loadingRef,
+        name,
+        onAddValueItem,
+        onRemoveValueItem,
+        ref,
+        setData,
         setDisabled,
         setErrorErrorHelperText,
+        setHidden,
         setItems,
         setLoading,
-        data,
-        setData,
-        hidden,
-        setHidden,
-        changeValue,
+        setValue,
+        validate,
+        valueRef,
     ]);
     useEffect(function () {
         if (onLoadItems) {
@@ -3150,14 +3005,14 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
             }
             finalValue_1 = getFinalValue(finalValue_1);
             if (value !== finalValue_1) {
-                changeValue(finalValue_1);
+                setValue(finalValue_1, true);
                 nextTick(function () {
                     onValueChangeByUser(name, finalValue_1);
                     onRequestSearchSubmit(name, finalValue_1);
                 });
             }
         }
-    }, [readOnly, items, getFinalValue, value, changeValue, onValueChangeByUser, name, onRequestSearchSubmit]);
+    }, [readOnly, items, getFinalValue, value, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
@@ -3270,13 +3125,13 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
      * State
      * ******************************************************************************************************************/
     var _f = useState(false), isOnGetItemLoading = _f[0], setIsOnGetItemLoading = _f[1];
-    var _g = useAutoUpdateState(initItems), items = _g[0], setItems = _g[1];
-    var _h = useAutoUpdateState(initError), error = _h[0], setError = _h[1];
-    var _j = useState(), errorHelperText = _j[0], setErrorHelperText = _j[1];
-    var _k = useAutoUpdateState(initLoading), loading = _k[0], setLoading = _k[1];
-    var _l = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _l[0], setDisabled = _l[1];
-    var _m = useAutoUpdateState(initHidden), hidden = _m[0], setHidden = _m[1];
-    var _o = useAutoUpdateState(initData), data = _o[0], setData = _o[1];
+    var _g = useAutoUpdateState(initError), error = _g[0], setError = _g[1];
+    var _h = useState(), errorHelperText = _h[0], setErrorHelperText = _h[1];
+    var _j = useAutoUpdateRefState(initData), dataRef = _j[0], setData = _j[2];
+    var _k = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _k[0], disabled = _k[1], setDisabled = _k[2];
+    var _l = useAutoUpdateRefState(initHidden), hiddenRef = _l[0], hidden = _l[1], setHidden = _l[2];
+    var _m = useAutoUpdateRefState(initLoading), loadingRef = _m[0], loading = _m[1], setLoading = _m[2];
+    var _o = useAutoUpdateRefState(initItems), itemsRef = _o[0], items = _o[1], setItems = _o[2];
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
@@ -3316,7 +3171,32 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
         return __assign({ width: finalWidth }, initStyle);
     }, [formColWidth, fullWidth, initStyle, initWidth, isOnGetItemLoading, width]);
     /********************************************************************************************************************
-     * Function - getFinalValue
+     * Function - setErrorErrorHelperText
+     * ******************************************************************************************************************/
+    var setErrorErrorHelperText = useCallback(function (error, errorHelperText) {
+        setError(error);
+        setErrorHelperText(errorHelperText);
+    }, [setError]);
+    /********************************************************************************************************************
+     * Function - validate
+     * ******************************************************************************************************************/
+    var validate = useCallback(function (value) {
+        if (required && empty(value)) {
+            setErrorErrorHelperText(true, '필수 선택 항목입니다.');
+            return false;
+        }
+        if (onValidate) {
+            var onValidateResult = onValidate(value);
+            if (onValidateResult != null && onValidateResult !== true) {
+                setErrorErrorHelperText(true, onValidateResult);
+                return false;
+            }
+        }
+        setErrorErrorHelperText(false, undefined);
+        return true;
+    }, [required, onValidate, setErrorErrorHelperText]);
+    /********************************************************************************************************************
+     * State - value
      * ******************************************************************************************************************/
     var getFinalValue = useCallback(function (value) {
         var finalValue = value;
@@ -3366,52 +3246,16 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
         finalValue = onValue ? onValue(finalValue) : finalValue;
         return equal(value, finalValue) ? value : finalValue;
     }, [multiple, formValueSeparator, itemsValues, onValue]);
-    /********************************************************************************************************************
-     * Function - setErrorErrorHelperText
-     * ******************************************************************************************************************/
-    var setErrorErrorHelperText = useCallback(function (error, errorHelperText) {
-        setError(error);
-        setErrorHelperText(errorHelperText);
-    }, [setError]);
-    /********************************************************************************************************************
-     * Function - validate
-     * ******************************************************************************************************************/
-    var validate = useCallback(function (value) {
-        if (required && empty(value)) {
-            setErrorErrorHelperText(true, '필수 선택 항목입니다.');
-            return false;
-        }
-        if (onValidate) {
-            var onValidateResult = onValidate(value);
-            if (onValidateResult != null && onValidateResult !== true) {
-                setErrorErrorHelperText(true, onValidateResult);
-                return false;
-            }
-        }
-        setErrorErrorHelperText(false, undefined);
-        return true;
-    }, [required, onValidate, setErrorErrorHelperText]);
-    /********************************************************************************************************************
-     * State - value
-     * ******************************************************************************************************************/
-    var _p = useState(function () { return getFinalValue(initValue); }), value = _p[0], setValue = _p[1];
-    var changeValue = useCallback(function (newValue) {
-        if (!equal(value, newValue)) {
-            setValue(newValue);
-            nextTick(function () {
-                if (error)
-                    validate(newValue);
-                if (onChange)
-                    onChange(newValue);
-                onValueChange(name, newValue);
-            });
-        }
-    }, [error, name, onChange, onValueChange, validate, value]);
+    var _p = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _p[0], value = _p[1], setValue = _p[2];
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(initValue));
-    }, [initValue]);
+        if (error)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(value));
+        setValue(valueRef.current);
     }, [multiple]);
     /********************************************************************************************************************
      * Effect
@@ -3441,7 +3285,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
                     }
                 }
                 if (setFirstItem) {
-                    changeValue(getFinalValue((multiple ? [items[0].value] : items[0].value)));
+                    setValue(getFinalValue((multiple ? [items[0].value] : items[0].value)));
                 }
             }
         }
@@ -3459,60 +3303,33 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
         if (ref || onAddValueItem) {
-            var lastValue_1 = value;
-            var lastData_1 = data;
-            var lastItems_1 = items;
-            var lastLoading_1 = loading;
-            var lastDisabled_1 = !!disabled;
-            var lastHidden_1 = !!hidden;
             var commands = {
                 getType: function () { return 'FormToggleButtonGroup'; },
                 getName: function () { return name; },
                 getReset: function () { return getFinalValue(initValue); },
-                reset: function () {
-                    lastValue_1 = getFinalValue(initValue);
-                    changeValue(lastValue_1);
-                },
-                getValue: function () { return lastValue_1; },
-                setValue: function (value) {
-                    lastValue_1 = getFinalValue(value);
-                    changeValue(lastValue_1);
-                },
-                getData: function () { return lastData_1; },
-                setData: function (data) {
-                    lastData_1 = data;
-                    setData(data);
-                },
+                reset: function () { return setValue(initValue); },
+                getValue: function () { return valueRef.current; },
+                setValue: setValue,
+                getData: function () { return dataRef.current; },
+                setData: setData,
                 isExceptValue: function () { return !!exceptValue; },
-                isDisabled: function () { return lastDisabled_1; },
-                setDisabled: function (disabled) {
-                    lastDisabled_1 = disabled;
-                    setDisabled(disabled);
-                },
-                isHidden: function () { return lastHidden_1; },
-                setHidden: function (hidden) {
-                    lastHidden_1 = hidden;
-                    setHidden(hidden);
-                },
+                isDisabled: function () { return !!disabledRef.current; },
+                setDisabled: setDisabled,
+                isHidden: function () { return !!hiddenRef.current; },
+                setHidden: setHidden,
                 focus: focus,
                 focusValidate: focus,
-                validate: function () { return validate(value); },
+                validate: function () { return validate(valueRef.current); },
                 setError: function (error, errorText) {
                     return setErrorErrorHelperText(error, error ? errorText : undefined);
                 },
                 getFormValueSeparator: function () { return formValueSeparator; },
                 isFormValueSort: function () { return !!formValueSort; },
-                getItems: function () { return lastItems_1; },
-                setItems: function (items) {
-                    lastItems_1 = items;
-                    setItems(lastItems_1);
-                },
+                getItems: function () { return itemsRef.current; },
+                setItems: setItems,
                 isMultiple: function () { return !!multiple; },
-                getLoading: function () { return !!lastLoading_1; },
-                setLoading: function (loading) {
-                    lastLoading_1 = loading;
-                    setLoading(lastLoading_1);
-                },
+                getLoading: function () { return !!loadingRef.current; },
+                setLoading: setLoading,
             };
             if (ref) {
                 if (typeof ref === 'function') {
@@ -3538,19 +3355,18 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
             };
         }
     }, [
-        changeValue,
-        data,
-        disabled,
+        dataRef,
+        disabledRef,
         exceptValue,
         focus,
         formValueSeparator,
         formValueSort,
         getFinalValue,
-        hidden,
+        hiddenRef,
         id,
         initValue,
-        items,
-        loading,
+        itemsRef,
+        loadingRef,
         multiple,
         name,
         onAddValueItem,
@@ -3562,8 +3378,9 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
         setHidden,
         setItems,
         setLoading,
+        setValue,
         validate,
-        value,
+        valueRef,
     ]);
     /********************************************************************************************************************
      * Event Handler
@@ -3577,20 +3394,20 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
             if (notAllowEmptyValue) {
                 if (multiple) {
                     if (empty(finalValue_1)) {
-                        if (Array.isArray(value) && value.length > 0) {
-                            finalValue_1 = [value[0]];
+                        if (Array.isArray(valueRef.current) && valueRef.current.length > 0) {
+                            finalValue_1 = [valueRef.current[0]];
                         }
                     }
                 }
                 else {
                     if (finalValue_1 == null) {
-                        finalValue_1 = value;
+                        finalValue_1 = valueRef.current;
                     }
                 }
             }
             finalValue_1 = getFinalValue(finalValue_1);
-            if (!equal(value, finalValue_1)) {
-                changeValue(finalValue_1);
+            if (!equal(valueRef.current, finalValue_1)) {
+                setValue(finalValue_1, true);
                 nextTick(function () {
                     onValueChangeByUser(name, finalValue_1);
                     onRequestSearchSubmit(name, finalValue_1);
@@ -3601,9 +3418,9 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
         readOnly,
         notAllowEmptyValue,
         getFinalValue,
-        value,
+        valueRef,
         multiple,
-        changeValue,
+        setValue,
         onValueChangeByUser,
         name,
         onRequestSearchSubmit,
@@ -3710,9 +3527,9 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
      * ******************************************************************************************************************/
     var _d = useAutoUpdateState(initError), error = _d[0], setError = _d[1];
     var _e = useState(), errorHelperText = _e[0], setErrorHelperText = _e[1];
-    var _f = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _f[0], setDisabled = _f[1];
-    var _g = useAutoUpdateState(initHidden), hidden = _g[0], setHidden = _g[1];
-    var _h = useAutoUpdateState(initData), data = _h[0], setData = _h[1];
+    var _f = useAutoUpdateRefState(initData), dataRef = _f[0], setData = _f[2];
+    var _g = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _g[0], disabled = _g[1], setDisabled = _g[2];
+    var _h = useAutoUpdateRefState(initHidden), hiddenRef = _h[0], hidden = _h[1], setHidden = _h[2];
     /********************************************************************************************************************
      * State - width, height
      * ******************************************************************************************************************/
@@ -3721,12 +3538,6 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
         handleWidth: true,
         handleHeight: true,
     }), width = _j.width, height = _j.height;
-    /********************************************************************************************************************
-     * Function - getFinalValue
-     * ******************************************************************************************************************/
-    var getFinalValue = useCallback(function (value) {
-        return onValue ? onValue(value) : value;
-    }, [onValue]);
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
@@ -3752,22 +3563,18 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
     /********************************************************************************************************************
      * State - value
      * ******************************************************************************************************************/
-    var _k = useState(function () { return getFinalValue(initValue || 0); }), value = _k[0], setValue = _k[1];
-    var changeValue = useCallback(function (newValue) {
-        if (!equal(value, newValue)) {
-            setValue(newValue);
-            nextTick(function () {
-                if (error)
-                    validate(newValue);
-                if (onChange)
-                    onChange(newValue);
-                onValueChange(name, newValue);
-            });
-        }
-    }, [error, name, onChange, onValueChange, validate, value]);
+    var getFinalValue = useCallback(function (value) {
+        var finalValue = value || 0;
+        return onValue ? onValue(finalValue) : finalValue;
+    }, [onValue]);
+    var _k = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _k[0], value = _k[1], setValue = _k[2];
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(initValue || 0));
-    }, [initValue]);
+        if (error)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
@@ -3796,42 +3603,23 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
      * Commands
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
-        var lastValue = value;
-        var lastData = data;
-        var lastDisabled = !!disabled;
-        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormRating'; },
             getName: function () { return name; },
-            getReset: function () { return getFinalValue(initValue || 0); },
-            reset: function () {
-                lastValue = getFinalValue(initValue || 0);
-                changeValue(lastValue);
-            },
-            getValue: function () { return lastValue; },
-            setValue: function (value) {
-                lastValue = getFinalValue(value);
-                changeValue(lastValue);
-            },
-            getData: function () { return lastData; },
-            setData: function (data) {
-                lastData = data;
-                setData(data);
-            },
+            getReset: function () { return getFinalValue(initValue); },
+            reset: function () { return setValue(initValue); },
+            getValue: function () { return valueRef.current; },
+            setValue: function (value) { return setValue(value); },
+            getData: function () { return dataRef.current; },
+            setData: function (data) { return setData(data); },
             isExceptValue: function () { return !!exceptValue; },
-            isDisabled: function () { return lastDisabled; },
-            setDisabled: function (disabled) {
-                lastDisabled = disabled;
-                setDisabled(disabled);
-            },
-            isHidden: function () { return lastHidden; },
-            setHidden: function (hidden) {
-                lastHidden = hidden;
-                setHidden(hidden);
-            },
+            isDisabled: function () { return !!disabledRef.current; },
+            setDisabled: function (disabled) { return setDisabled(disabled); },
+            isHidden: function () { return !!hiddenRef.current; },
+            setHidden: function (hidden) { return setHidden(hidden); },
             focus: focus,
             focusValidate: focus,
-            validate: function () { return validate(value); },
+            validate: function () { return validate(valueRef.current); },
             setError: function (error, errorHelperText) {
                 return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
             },
@@ -3857,25 +3645,25 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
             }
         };
     }, [
-        name,
-        initValue,
-        value,
-        getFinalValue,
+        dataRef,
+        disabledRef,
         exceptValue,
-        disabled,
         focus,
-        validate,
-        ref,
+        getFinalValue,
+        hiddenRef,
+        id,
+        initValue,
+        name,
         onAddValueItem,
         onRemoveValueItem,
-        id,
+        ref,
+        setData,
         setDisabled,
         setErrorErrorHelperText,
-        data,
-        setData,
-        hidden,
         setHidden,
-        changeValue,
+        setValue,
+        validate,
+        valueRef,
     ]);
     /********************************************************************************************************************
      * Event Handler
@@ -3885,14 +3673,13 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
             e.preventDefault();
         }
         else {
-            var finalValue_1 = getFinalValue(value || 0);
-            changeValue(finalValue_1);
+            var finalValue_1 = setValue(value);
             nextTick(function () {
                 onValueChangeByUser(name, finalValue_1);
                 onRequestSearchSubmit(name, finalValue_1);
             });
         }
-    }, [readOnly, getFinalValue, changeValue, onValueChangeByUser, name, onRequestSearchSubmit]);
+    }, [readOnly, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
@@ -3943,9 +3730,9 @@ styleInject(css_248z$c);var FormTextEditor = React.forwardRef(function (_a, ref)
     var _d = useAutoUpdateState(initError), error = _d[0], setError = _d[1];
     var _e = useState(), errorHelperText = _e[0], setErrorHelperText = _e[1];
     var _f = useState(false), initialized = _f[0], setInitialized = _f[1];
-    var _g = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _g[0], setDisabled = _g[1];
-    var _h = useAutoUpdateState(initHidden), hidden = _h[0], setHidden = _h[1];
-    var _j = useAutoUpdateState(initData), data = _j[0], setData = _j[1];
+    var _g = useAutoUpdateRefState(initData), dataRef = _g[0], setData = _g[2];
+    var _h = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _h[0], disabled = _h[1], setDisabled = _h[2];
+    var _j = useAutoUpdateRefState(initHidden), hiddenRef = _j[0], hidden = _j[1], setHidden = _j[2];
     /********************************************************************************************************************
      * Function - setErrorErrorHelperText
      * ******************************************************************************************************************/
@@ -3975,22 +3762,17 @@ styleInject(css_248z$c);var FormTextEditor = React.forwardRef(function (_a, ref)
     /********************************************************************************************************************
      * State - value
      * ******************************************************************************************************************/
-    var _k = useState(initValue || ''), value = _k[0], setValue = _k[1];
-    var changeValue = useCallback(function (newValue) {
-        if (!equal(value, newValue)) {
-            setValue(newValue);
-            nextTick(function () {
-                if (error)
-                    validate(newValue);
-                if (onChange)
-                    onChange(newValue);
-                onValueChange(name, newValue);
-            });
-        }
-    }, [error, name, onChange, onValueChange, validate, value]);
+    var getFinalValue = useCallback(function (value) {
+        return value || '';
+    }, []);
+    var _k = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _k[0], value = _k[1], setValue = _k[2];
     useFirstSkipEffect(function () {
-        changeValue(initValue || '');
-    }, [initValue]);
+        if (error)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
     /********************************************************************************************************************
      * Function - focus
      * ******************************************************************************************************************/
@@ -4002,42 +3784,23 @@ styleInject(css_248z$c);var FormTextEditor = React.forwardRef(function (_a, ref)
      * Commands
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
-        var lastValue = value;
-        var lastData = data;
-        var lastDisabled = !!disabled;
-        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormTextEditor'; },
             getName: function () { return name; },
-            getReset: function () { return initValue || ''; },
-            reset: function () {
-                lastValue = initValue || '';
-                changeValue(lastValue);
-            },
-            getValue: function () { return lastValue; },
-            setValue: function (value) {
-                lastValue = value;
-                changeValue(lastValue);
-            },
-            getData: function () { return lastData; },
-            setData: function (data) {
-                lastData = data;
-                setData(data);
-            },
+            getReset: function () { return getFinalValue(initValue); },
+            reset: function () { return setValue(initValue); },
+            getValue: function () { return valueRef.current; },
+            setValue: setValue,
+            getData: function () { return dataRef.current; },
+            setData: setData,
             isExceptValue: function () { return !!exceptValue; },
-            isDisabled: function () { return lastDisabled; },
-            setDisabled: function (disabled) {
-                lastDisabled = disabled;
-                setDisabled(disabled);
-            },
-            isHidden: function () { return lastHidden; },
-            setHidden: function (hidden) {
-                lastHidden = hidden;
-                setHidden(hidden);
-            },
+            isDisabled: function () { return !!disabledRef.current; },
+            setDisabled: setDisabled,
+            isHidden: function () { return !!hiddenRef.current; },
+            setHidden: setHidden,
             focus: focus,
             focusValidate: focus,
-            validate: function () { return validate(value); },
+            validate: function () { return validate(valueRef.current); },
             setError: function (error, errorText) {
                 return setErrorErrorHelperText(error, error ? errorText : undefined);
             },
@@ -4063,37 +3826,38 @@ styleInject(css_248z$c);var FormTextEditor = React.forwardRef(function (_a, ref)
             }
         };
     }, [
-        name,
-        initValue,
-        value,
+        dataRef,
+        disabledRef,
         exceptValue,
-        disabled,
         focus,
-        ref,
+        getFinalValue,
+        hiddenRef,
+        id,
+        initValue,
+        name,
         onAddValueItem,
         onRemoveValueItem,
-        id,
+        ref,
+        setData,
         setDisabled,
         setErrorErrorHelperText,
-        data,
-        setData,
-        validate,
-        hidden,
         setHidden,
-        changeValue,
+        setValue,
+        validate,
+        valueRef,
     ]);
     /********************************************************************************************************************
      * Event Handler
      * ******************************************************************************************************************/
     var handleEditorChange = useCallback(function (value) {
-        changeValue(value);
+        setValue(value);
         if (new Date().getTime() - keyDownTime.current < 300) {
             nextTick(function () {
                 if (onValueChangeByUser)
                     onValueChangeByUser(name, value);
             });
         }
-    }, [changeValue, name, onValueChangeByUser]);
+    }, [name, onValueChangeByUser, setValue]);
     var handleKeyDown = useCallback(function () {
         keyDownTime.current = new Date().getTime();
     }, []);
@@ -4191,14 +3955,14 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
      * State
      * ******************************************************************************************************************/
     var _c = useState(false), isOnGetItemLoading = _c[0], setIsOnGetItemLoading = _c[1];
-    var _d = useAutoUpdateState(initItems), items = _d[0], setItems = _d[1];
-    var _e = useAutoUpdateState(initError), error = _e[0], setError = _e[1];
-    var _f = useState(), errorHelperText = _f[0], setErrorHelperText = _f[1];
-    var _g = useAutoUpdateState(initLoading), loading = _g[0], setLoading = _g[1];
-    var _h = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _h[0], setDisabled = _h[1];
-    var _j = useAutoUpdateState(initHidden), hidden = _j[0], setHidden = _j[1];
-    var _k = useState(undefined), inputValue = _k[0], setInputValue = _k[1];
-    var _l = useAutoUpdateState(initData), data = _l[0], setData = _l[1];
+    var _d = useAutoUpdateState(initError), error = _d[0], setError = _d[1];
+    var _e = useState(), errorHelperText = _e[0], setErrorHelperText = _e[1];
+    var _f = useState(undefined), inputValue = _f[0], setInputValue = _f[1];
+    var _g = useAutoUpdateRefState(initData), dataRef = _g[0], setData = _g[2];
+    var _h = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _h[0], disabled = _h[1], setDisabled = _h[2];
+    var _j = useAutoUpdateRefState(initHidden), hiddenRef = _j[0], hidden = _j[1], setHidden = _j[2];
+    var _k = useAutoUpdateRefState(initLoading), loadingRef = _k[0], loading = _k[1], setLoading = _k[2];
+    var _l = useAutoUpdateRefState(initItems), itemsRef = _l[0], items = _l[1], setItems = _l[2];
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
@@ -4225,7 +3989,32 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
         return style;
     }, [initStyle, width, hidden]);
     /********************************************************************************************************************
-     * Function - getFinalValue
+     * Function - setErrorErrorHelperText
+     * ******************************************************************************************************************/
+    var setErrorErrorHelperText = useCallback(function (error, errorHelperText) {
+        setError(error);
+        setErrorHelperText(errorHelperText);
+    }, [setError]);
+    /********************************************************************************************************************
+     * Function - validate
+     * ******************************************************************************************************************/
+    var validate = useCallback(function (value) {
+        if (required && empty(value)) {
+            setErrorErrorHelperText(true, '필수 선택 항목입니다.');
+            return false;
+        }
+        if (onValidate) {
+            var onValidateResult = onValidate(value);
+            if (onValidateResult != null && onValidateResult !== true) {
+                setErrorErrorHelperText(true, onValidateResult);
+                return false;
+            }
+        }
+        setErrorErrorHelperText(false, undefined);
+        return true;
+    }, [required, onValidate, setErrorErrorHelperText]);
+    /********************************************************************************************************************
+     * State - value
      * ******************************************************************************************************************/
     var getFinalValue = useCallback(function (value) {
         var finalValue = value;
@@ -4274,54 +4063,21 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
         }
         return onValue ? onValue(finalValue) : finalValue;
     }, [multiple, formValueSeparator, itemsValues, onValue]);
-    /********************************************************************************************************************
-     * Function - setErrorErrorHelperText
-     * ******************************************************************************************************************/
-    var setErrorErrorHelperText = useCallback(function (error, errorHelperText) {
-        setError(error);
-        setErrorHelperText(errorHelperText);
-    }, [setError]);
-    /********************************************************************************************************************
-     * Function - validate
-     * ******************************************************************************************************************/
-    var validate = useCallback(function (value) {
-        if (required && empty(value)) {
-            setErrorErrorHelperText(true, '필수 선택 항목입니다.');
-            return false;
-        }
-        if (onValidate) {
-            var onValidateResult = onValidate(value);
-            if (onValidateResult != null && onValidateResult !== true) {
-                setErrorErrorHelperText(true, onValidateResult);
-                return false;
-            }
-        }
-        setErrorErrorHelperText(false, undefined);
-        return true;
-    }, [required, onValidate, setErrorErrorHelperText]);
-    /********************************************************************************************************************
-     * State - value
-     * ******************************************************************************************************************/
-    var _m = useState(function () { return getFinalValue(initValue); }), value = _m[0], setValue = _m[1];
+    var _m = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _m[0], value = _m[1], setValue = _m[2];
     var _o = useState(null), valueItem = _o[0], setValueItem = _o[1];
-    var changeValue = useCallback(function (newValue) {
-        if (!equal(value, newValue)) {
-            setValue(newValue);
-            nextTick(function () {
-                if (error)
-                    validate(newValue);
-                if (onChange)
-                    onChange(newValue);
-                onValueChange(name, newValue);
-            });
-        }
-    }, [error, name, onChange, onValueChange, validate, value]);
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(initValue));
-    }, [initValue]);
+        if (error)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(value));
+        setValue(getFinalValue(valueRef.current));
     }, [multiple]);
+    /********************************************************************************************************************
+     * Memo
+     * ******************************************************************************************************************/
     var componentValue = useMemo(function () {
         var finalValue = value;
         if (finalValue != null) {
@@ -4482,60 +4238,33 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
         if (ref || onAddValueItem) {
-            var lastValue_1 = value;
-            var lastData_1 = data;
-            var lastItems_1 = items;
-            var lastLoading_1 = loading;
-            var lastDisabled_1 = !!disabled;
-            var lastHidden_1 = !!hidden;
             var commands = {
                 getType: function () { return 'FormAutocomplete'; },
                 getName: function () { return name; },
                 getReset: function () { return getFinalValue(initValue); },
-                reset: function () {
-                    lastValue_1 = getFinalValue(initValue);
-                    changeValue(lastValue_1);
-                },
-                getValue: function () { return lastValue_1; },
-                setValue: function (value) {
-                    lastValue_1 = getFinalValue(value);
-                    changeValue(lastValue_1);
-                },
-                getData: function () { return lastData_1; },
-                setData: function (data) {
-                    lastData_1 = data;
-                    setData(data);
-                },
+                reset: function () { return setValue(initValue); },
+                getValue: function () { return valueRef.current; },
+                setValue: function (newValue) { return setValue(newValue); },
+                getData: function () { return dataRef.current; },
+                setData: function (data) { return setData(data); },
                 isExceptValue: function () { return !!exceptValue; },
-                isDisabled: function () { return lastDisabled_1; },
-                setDisabled: function (disabled) {
-                    lastDisabled_1 = disabled;
-                    setDisabled(disabled);
-                },
-                isHidden: function () { return lastHidden_1; },
-                setHidden: function (hidden) {
-                    lastHidden_1 = hidden;
-                    setHidden(hidden);
-                },
+                isDisabled: function () { return !!disabledRef.current; },
+                setDisabled: function (disabled) { return setDisabled(disabled); },
+                isHidden: function () { return !!hiddenRef.current; },
+                setHidden: function (hidden) { return setHidden(hidden); },
                 focus: focus,
                 focusValidate: focus,
-                validate: function () { return validate(value); },
+                validate: function () { return validate(valueRef.current); },
                 setError: function (error, errorText) {
                     return setErrorErrorHelperText(error, error ? errorText : undefined);
                 },
                 getFormValueSeparator: function () { return formValueSeparator; },
                 isFormValueSort: function () { return !!formValueSort; },
-                getItems: function () { return lastItems_1; },
-                setItems: function (items) {
-                    lastItems_1 = items;
-                    setItems(lastItems_1);
-                },
+                getItems: function () { return itemsRef.current; },
+                setItems: function (items) { return setItems(items); },
                 isMultiple: function () { return !!multiple; },
-                getLoading: function () { return !!lastLoading_1; },
-                setLoading: function (loading) {
-                    lastLoading_1 = loading;
-                    setLoading(lastLoading_1);
-                },
+                getLoading: function () { return !!loadingRef.current; },
+                setLoading: function (loading) { return setLoading(loading); },
             };
             if (ref) {
                 if (typeof ref === 'function') {
@@ -4561,32 +4290,32 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
             };
         }
     }, [
-        name,
-        initValue,
-        value,
-        getFinalValue,
+        dataRef,
+        disabledRef,
         exceptValue,
-        disabled,
-        multiple,
         focus,
-        validate,
         formValueSeparator,
         formValueSort,
-        items,
-        ref,
+        getFinalValue,
+        hiddenRef,
+        id,
+        initValue,
+        itemsRef,
+        loadingRef,
+        multiple,
+        name,
         onAddValueItem,
         onRemoveValueItem,
-        loading,
-        id,
+        ref,
+        setData,
         setDisabled,
         setErrorErrorHelperText,
+        setHidden,
         setItems,
         setLoading,
-        data,
-        setData,
-        hidden,
-        setHidden,
-        changeValue,
+        setValue,
+        validate,
+        valueRef,
     ]);
     /********************************************************************************************************************
      * Event Handler
@@ -4605,8 +4334,8 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
                 }
             }
             var finalValue = getFinalValue(newValue);
-            if (!equal(value, finalValue)) {
-                changeValue(finalValue);
+            if (!equal(valueRef.current, finalValue)) {
+                setValue(finalValue, true);
                 setValueItem(componentValue);
                 nextTick(function () {
                     onValueChangeByUser(name, finalValue);
@@ -4634,7 +4363,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
         else {
             go();
         }
-    }, [multiple, getFinalValue, value, changeValue, onValueChangeByUser, name, onRequestSearchSubmit, onAddItem]);
+    }, [multiple, getFinalValue, valueRef, setValue, onValueChangeByUser, name, onRequestSearchSubmit, onAddItem]);
     var handleGetOptionDisabled = useCallback(function (option) {
         if (getOptionDisabled) {
             return option.disabled || getOptionDisabled(option);
@@ -4656,7 +4385,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
         }, renderTags: function (value, getTagProps) {
             return value.map(function (option, index) { return (React.createElement(Chip, __assign({ size: 'small', label: onRenderTag ? onRenderTag(option) : option.label }, getTagProps({ index: index })))); });
         }, renderInput: function (params) { return (React.createElement(FormTextField, __assign({}, params, { ref: textFieldRef, name: name, variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, labelShrink: labelShrink, required: required, focused: focused, error: error, readOnly: readOnly, helperText: error ? errorHelperText : helperText, placeholder: placeholder, noFormValueItem: true, InputProps: __assign(__assign({}, params.InputProps), { endAdornment: (React.createElement(React.Fragment, null,
-                    loading || isOnGetItemLoading ? React.createElement(CircularProgress$1, { color: 'inherit', size: 20 }) : null,
+                    loading || isOnGetItemLoading ? React.createElement(CircularProgress, { color: 'inherit', size: 20 }) : null,
                     params.InputProps.endAdornment)) }), inputProps: readOnly || disabled ? __assign(__assign({}, params.inputProps), { tabIndex: -1 }) : params.inputProps }))); } }));
 }));
 FormAutocomplete.displayName = 'FormAutocomplete';
@@ -5231,9 +4960,9 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
     var _d = useAutoUpdateState(initError), error = _d[0], setError = _d[1];
     var _e = useState(null), timeError = _e[0], setTimeError = _e[1];
     var _f = useState(), errorHelperText = _f[0], setErrorHelperText = _f[1];
-    var _g = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _g[0], setDisabled = _g[1];
-    var _h = useAutoUpdateState(initHidden), hidden = _h[0], setHidden = _h[1];
-    var _j = useAutoUpdateState(initData), data = _j[0], setData = _j[1];
+    var _g = useAutoUpdateRefState(initData), dataRef = _g[0], setData = _g[2];
+    var _h = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _h[0], disabled = _h[1], setDisabled = _h[2];
+    var _j = useAutoUpdateRefState(initHidden), hiddenRef = _j[0], hidden = _j[1], setHidden = _j[2];
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
@@ -5262,23 +4991,7 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
         }
     }, [initFormValueFormat, time, type]);
     var availableDate = useMemo(function () { return makeAvailableDate(minDate, maxDate, !!disablePast, !!disableFuture); }, [disableFuture, disablePast, maxDate, minDate]);
-    /********************************************************************************************************************
-     * State - style
-     * ******************************************************************************************************************/
-    var style = useAutoUpdateState(useCallback(function () {
-        if (width != null) {
-            return __assign(__assign({}, initStyle), { width: width });
-        }
-        else {
-            return initStyle;
-        }
-    }, [initStyle, width]))[0];
-    /********************************************************************************************************************
-     * Function - getFinalValue
-     * ******************************************************************************************************************/
-    var getFinalValue = useCallback(function (value) {
-        return value;
-    }, []);
+    var style = useMemo(function () { return (width != null ? __assign(__assign({}, initStyle), { width: width }) : initStyle); }, [initStyle, width]);
     /********************************************************************************************************************
      * Function - setErrorErrorHelperText
      * ******************************************************************************************************************/
@@ -5319,27 +5032,22 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
     /********************************************************************************************************************
      * State - value
      * ******************************************************************************************************************/
-    var _k = useState(function () { return getFinalValue(initValue || null); }), value = _k[0], setValue = _k[1];
-    var _l = useState(null), inputValue = _l[0], setInputValue = _l[1];
-    var changeValue = useCallback(function (newValue) {
-        if (value !== newValue) {
-            setValue(newValue);
-            nextTick(function () {
-                if (error)
-                    validate(newValue);
-                if (onChange)
-                    onChange(newValue);
-                onValueChange(name, newValue);
-            });
-        }
-    }, [error, name, onChange, onValueChange, validate, value]);
+    var getFinalValue = useCallback(function (value) {
+        return value || null;
+    }, []);
+    var _k = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _k[0], value = _k[1], setValue = _k[2];
+    useFirstSkipEffect(function () {
+        if (error)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
     /********************************************************************************************************************
      * Effect
      * ******************************************************************************************************************/
+    var _l = useState(value), inputValue = _l[0], setInputValue = _l[1];
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(initValue || null));
-    }, [initValue]);
-    useEffect(function () {
         setInputValue(value);
     }, [value]);
     useFirstSkipEffect(function () {
@@ -5402,42 +5110,23 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
         if (ref || onAddValueItem) {
-            var lastValue_1 = value;
-            var lastData_1 = data;
-            var lastDisabled_1 = !!disabled;
-            var lastHidden_1 = !!hidden;
             var commands = {
                 getType: function () { return 'default'; },
                 getName: function () { return name; },
                 getReset: function () { return getFinalValue(initValue || null); },
-                reset: function () {
-                    lastValue_1 = getFinalValue(initValue || null);
-                    changeValue(lastValue_1);
-                },
-                getValue: function () { return lastValue_1; },
-                setValue: function (value) {
-                    lastValue_1 = getFinalValue(value);
-                    changeValue(lastValue_1);
-                },
-                getData: function () { return lastData_1; },
-                setData: function (data) {
-                    lastData_1 = data;
-                    setData(data);
-                },
+                reset: function () { return setValue(initValue); },
+                getValue: function () { return valueRef.current; },
+                setValue: setValue,
+                getData: function () { return dataRef.current; },
+                setData: setData,
                 isExceptValue: function () { return !!exceptValue; },
-                isDisabled: function () { return lastDisabled_1; },
-                setDisabled: function (disabled) {
-                    lastDisabled_1 = disabled;
-                    setDisabled(disabled);
-                },
-                isHidden: function () { return lastHidden_1; },
-                setHidden: function (hidden) {
-                    lastHidden_1 = hidden;
-                    setHidden(hidden);
-                },
+                isDisabled: function () { return !!disabledRef.current; },
+                setDisabled: setDisabled,
+                isHidden: function () { return !!hiddenRef.current; },
+                setHidden: setHidden,
                 focus: focus,
                 focusValidate: focus,
-                validate: function () { return validate(value); },
+                validate: function () { return validate(valueRef.current); },
                 setError: function (error, errorText) {
                     return setErrorErrorHelperText(error, error ? errorText : undefined);
                 },
@@ -5467,26 +5156,26 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
             };
         }
     }, [
-        name,
-        initValue,
-        value,
-        getFinalValue,
+        dataRef,
+        disabledRef,
         exceptValue,
-        disabled,
         focus,
-        validate,
         formValueFormat,
-        ref,
+        getFinalValue,
+        hiddenRef,
+        id,
+        initValue,
+        name,
         onAddValueItem,
         onRemoveValueItem,
-        id,
+        ref,
+        setData,
         setDisabled,
         setErrorErrorHelperText,
-        data,
-        setData,
-        hidden,
         setHidden,
-        changeValue,
+        setValue,
+        validate,
+        valueRef,
     ]);
     /********************************************************************************************************************
      * Event Handler
@@ -5527,7 +5216,7 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
                 if (time === unit)
                     setOpen(false);
             }
-            changeValue(finalValue);
+            setValue(finalValue);
             nextTick(function () {
                 onValueChangeByUser(name, finalValue);
                 if (runOnRequestSearchSubmit_1) {
@@ -5536,7 +5225,7 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
             });
         }
         setInputValue(finalValue);
-    }, [type, time, changeValue, availableDate, open, onValueChangeByUser, name, onRequestSearchSubmit]);
+    }, [type, time, setValue, availableDate, open, onValueChangeByUser, name, onRequestSearchSubmit]);
     var handleContainerFocus = useCallback(function () {
         if (closeTimeoutRef.current) {
             clearTimeout(closeTimeoutRef.current);
@@ -5999,9 +5688,9 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
     var _d = useAutoUpdateState(initError), error = _d[0], setError = _d[1];
     var _e = useState(null), timeError = _e[0], setTimeError = _e[1];
     var _f = useState(), errorHelperText = _f[0], setErrorHelperText = _f[1];
-    var _g = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _g[0], setDisabled = _g[1];
-    var _h = useAutoUpdateState(initHidden), hidden = _h[0], setHidden = _h[1];
-    var _j = useAutoUpdateState(initData), data = _j[0], setData = _j[1];
+    var _g = useAutoUpdateRefState(initData), dataRef = _g[0], setData = _g[2];
+    var _h = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _h[0], disabled = _h[1], setDisabled = _h[2];
+    var _j = useAutoUpdateRefState(initHidden), hiddenRef = _j[0], hidden = _j[1], setHidden = _j[2];
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
@@ -6030,23 +5719,7 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
         }
     }, [initFormValueFormat, time, type]);
     var availableDate = useMemo(function () { return makeAvailableDate(minDate, maxDate, !!disablePast, !!disableFuture); }, [disableFuture, disablePast, maxDate, minDate]);
-    /********************************************************************************************************************
-     * State - style
-     * ******************************************************************************************************************/
-    var style = useAutoUpdateState(useCallback(function () {
-        if (width != null) {
-            return __assign(__assign({}, initStyle), { width: width });
-        }
-        else {
-            return initStyle;
-        }
-    }, [initStyle, width]))[0];
-    /********************************************************************************************************************
-     * Function - getFinalValue
-     * ******************************************************************************************************************/
-    var getFinalValue = useCallback(function (value) {
-        return value;
-    }, []);
+    var style = useMemo(function () { return (width != null ? __assign(__assign({}, initStyle), { width: width }) : initStyle); }, [initStyle, width]);
     /********************************************************************************************************************
      * Function - setErrorErrorHelperText
      * ******************************************************************************************************************/
@@ -6087,29 +5760,27 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
     /********************************************************************************************************************
      * State - value
      * ******************************************************************************************************************/
-    var _k = useState(function () { return getFinalValue(initValue || null); }), value = _k[0], setValue = _k[1];
-    var _l = useState(null), inputValue = _l[0], setInputValue = _l[1];
-    var changeValue = useCallback(function (newValue) {
-        if (value !== newValue) {
-            setValue(newValue);
-            nextTick(function () {
-                if (error)
-                    validate(newValue);
-                if (onChange)
-                    onChange(newValue);
-                onValueChange(name, newValue);
-            });
-        }
-    }, [error, name, onChange, onValueChange, validate, value]);
+    var getFinalValue = useCallback(function (value) {
+        return value || null;
+    }, []);
+    var _k = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _k[0], value = _k[1], setValue = _k[2];
+    useFirstSkipEffect(function () {
+        if (error)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
     /********************************************************************************************************************
-     * Effect
+     * Memo
      * ******************************************************************************************************************/
+    var _l = useState(value), inputValue = _l[0], setInputValue = _l[1];
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(initValue || null));
-    }, [initValue]);
-    useEffect(function () {
         setInputValue(value);
     }, [value]);
+    /********************************************************************************************************************
+     * Effect
+     * ******************************************************************************************************************/
     useFirstSkipEffect(function () {
         if (error && !timeError)
             validate(value);
@@ -6170,42 +5841,23 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
         if (ref || onAddValueItem) {
-            var lastValue_1 = value;
-            var lastData_1 = data;
-            var lastDisabled_1 = !!disabled;
-            var lastHidden_1 = !!hidden;
             var commands = {
                 getType: function () { return 'default'; },
                 getName: function () { return name; },
-                getReset: function () { return getFinalValue(initValue || null); },
-                reset: function () {
-                    lastValue_1 = getFinalValue(initValue || null);
-                    changeValue(lastValue_1);
-                },
-                getValue: function () { return lastValue_1; },
-                setValue: function (value) {
-                    lastValue_1 = getFinalValue(value);
-                    changeValue(lastValue_1);
-                },
-                getData: function () { return lastData_1; },
-                setData: function (data) {
-                    lastData_1 = data;
-                    setData(data);
-                },
+                getReset: function () { return getFinalValue(initValue); },
+                reset: function () { return setValue(initValue); },
+                getValue: function () { return valueRef.current; },
+                setValue: setValue,
+                getData: function () { return dataRef.current; },
+                setData: setData,
                 isExceptValue: function () { return !!exceptValue; },
-                isDisabled: function () { return lastDisabled_1; },
-                setDisabled: function (disabled) {
-                    lastDisabled_1 = disabled;
-                    setDisabled(disabled);
-                },
-                isHidden: function () { return lastHidden_1; },
-                setHidden: function (hidden) {
-                    lastHidden_1 = hidden;
-                    setHidden(hidden);
-                },
+                isDisabled: function () { return !!disabledRef.current; },
+                setDisabled: setDisabled,
+                isHidden: function () { return !!hiddenRef.current; },
+                setHidden: setHidden,
                 focus: focus,
                 focusValidate: focus,
-                validate: function () { return validate(value); },
+                validate: function () { return validate(valueRef.current); },
                 setError: function (error, errorText) {
                     return setErrorErrorHelperText(error, error ? errorText : undefined);
                 },
@@ -6235,26 +5887,26 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
             };
         }
     }, [
-        name,
-        initValue,
-        value,
-        getFinalValue,
+        dataRef,
+        disabledRef,
         exceptValue,
-        disabled,
         focus,
-        validate,
         formValueFormat,
-        ref,
+        getFinalValue,
+        hiddenRef,
+        id,
+        initValue,
+        name,
         onAddValueItem,
         onRemoveValueItem,
-        id,
+        ref,
+        setData,
         setDisabled,
         setErrorErrorHelperText,
-        data,
-        setData,
-        hidden,
         setHidden,
-        changeValue,
+        setValue,
+        validate,
+        valueRef,
     ]);
     /********************************************************************************************************************
      * Event Handler
@@ -6296,7 +5948,7 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
                 if (time === unit)
                     setOpen(false);
             }
-            changeValue(finalValue);
+            setValue(finalValue);
             nextTick(function () {
                 onValueChangeByUser(name, finalValue);
                 if (runOnRequestSearchSubmit_1) {
@@ -6321,7 +5973,7 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
             }
         }
         setInputValue(finalValue);
-    }, [type, time, changeValue, availableDate, open, onValueChangeByUser, name, onRequestSearchSubmit]);
+    }, [type, time, setValue, availableDate, open, onValueChangeByUser, name, onRequestSearchSubmit]);
     var handleContainerFocus = useCallback(function () {
         if (closeTimeoutRef.current) {
             clearTimeout(closeTimeoutRef.current);
@@ -7562,10 +7214,11 @@ styleInject(css_248z$3);var FormDateRangePickerTooltipPicker = React.forwardRef(
      * State
      * ******************************************************************************************************************/
     var selectType = _a.selectType, initValue = _a.value, focusedDate = _a.focusedDate, month = _a.month, disableFuture = _a.disableFuture, disablePast = _a.disablePast, minDate = _a.minDate, maxDate = _a.maxDate, onValueChange = _a.onValueChange, onMouseEnterPickersDay = _a.onMouseEnterPickersDay, onMonthChange = _a.onMonthChange;
-    var value = useAutoUpdateState(useCallback(function () {
-        return initValue ? initValue : [null, null];
-    }, [initValue]))[0];
     var _b = useState(null), activeMonthValue = _b[0], setActiveMonthValue = _b[1];
+    /********************************************************************************************************************
+     * Memo
+     * ******************************************************************************************************************/
+    var value = useMemo(function () { return (initValue ? initValue : [null, null]); }, [initValue]);
     /********************************************************************************************************************
      * Effect
      * ******************************************************************************************************************/
@@ -8070,25 +7723,19 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _c = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _c[0], setDisabled = _c[1];
-    var _d = useAutoUpdateState(initHidden), hidden = _d[0], setHidden = _d[1];
-    var _e = useAutoUpdateState(initError), error = _e[0], setError = _e[1];
-    var _f = useState(), errorHelperText = _f[0], setErrorHelperText = _f[1];
-    var _g = useState(false), fromError = _g[0], setFromError = _g[1];
-    var _h = useState(), fromErrorHelperText = _h[0], setFromErrorHelperText = _h[1];
-    var _j = useState(false), toError = _j[0], setToError = _j[1];
-    var _k = useState(), toErrorHelperText = _k[0], setToErrorHelperText = _k[1];
-    var _l = useAutoUpdateState(initData), data = _l[0], setData = _l[1];
+    var _c = useAutoUpdateState(initError), error = _c[0], setError = _c[1];
+    var _d = useState(), errorHelperText = _d[0], setErrorHelperText = _d[1];
+    var _e = useState(false), fromError = _e[0], setFromError = _e[1];
+    var _f = useState(), fromErrorHelperText = _f[0], setFromErrorHelperText = _f[1];
+    var _g = useState(false), toError = _g[0], setToError = _g[1];
+    var _h = useState(), toErrorHelperText = _h[0], setToErrorHelperText = _h[1];
+    var _j = useAutoUpdateRefState(initData), dataRef = _j[0], setData = _j[2];
+    var _k = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _k[0], disabled = _k[1], setDisabled = _k[2];
+    var _l = useAutoUpdateRefState(initHidden), hiddenRef = _l[0], hidden = _l[1], setHidden = _l[2];
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
     var format = useMemo(function () { return initFormat || DEFAULT_FORMAT$4; }, [initFormat]);
-    /********************************************************************************************************************
-     * Function - getFinalValue
-     * ******************************************************************************************************************/
-    var getFinalValue = useCallback(function (value) {
-        return value || DEFAULT_VALUE$4;
-    }, []);
     /********************************************************************************************************************
      * Function - focus
      * ******************************************************************************************************************/
@@ -8213,24 +7860,19 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
         return [now, now.add(1, 'month'), now.add(2, 'month')];
     }), months = _p[0], setMonths = _p[1];
     /********************************************************************************************************************
-     * State - Value
+     * value
      * ******************************************************************************************************************/
-    var _q = useState(function () { return getFinalValue(initValue); }), value = _q[0], setValue = _q[1];
-    var changeValue = useCallback(function (newValue) {
-        if (value !== newValue) {
-            setValue(newValue);
-            nextTick(function () {
-                if (error || fromError || toError)
-                    validate(newValue);
-                if (onChange)
-                    onChange(newValue);
-                onValueChange(name, newValue);
-            });
-        }
-    }, [error, fromError, name, onChange, onValueChange, toError, validate, value]);
+    var getFinalValue = useCallback(function (value) {
+        return value || DEFAULT_VALUE$4;
+    }, []);
+    var _q = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _q[0], value = _q[1], setValue = _q[2];
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(initValue));
-    }, [initValue]);
+        if (error || fromError || toError)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
@@ -8311,11 +7953,11 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
      * Event Handler
      * ******************************************************************************************************************/
     var handleChange = useCallback(function (newValue) {
-        changeValue(newValue);
+        setValue(newValue);
         setOpen(false);
         setFromErrorErrorHelperText(false, undefined);
         setToErrorErrorHelperText(false, undefined);
-    }, [changeValue, setFromErrorErrorHelperText, setToErrorErrorHelperText]);
+    }, [setFromErrorErrorHelperText, setToErrorErrorHelperText, setValue]);
     var handleValueChange = useCallback(function (selectType, newValue, fromInput) {
         var _a;
         var finalValue;
@@ -8380,12 +8022,12 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
                 }
                 break;
         }
-        changeValue(finalValue);
+        setValue(finalValue);
         nextTick(function () {
             onValueChangeByUser(name, finalValue);
         });
     }, [
-        changeValue,
+        setValue,
         value,
         setFromErrorErrorHelperText,
         activeMonth,
@@ -8449,8 +8091,8 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
     var handleInputDatePickerFocus = useCallback(function (selectType) {
         if (readOnly || disabled)
             return;
-        var startValue = value[0];
-        var endValue = value[1];
+        var startValue = valueRef.current[0];
+        var endValue = valueRef.current[1];
         setOpen(true);
         setSelectType(selectType);
         if (startValue && endValue) {
@@ -8479,58 +8121,33 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
         else if (endValue) {
             activeMonth(endValue);
         }
-    }, [value, calendarCount, activeMonth, readOnly, disabled]);
+    }, [readOnly, disabled, valueRef, activeMonth, calendarCount]);
     /********************************************************************************************************************
      * Commands
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
         if (ref || onAddValueItem) {
-            var lastValue_1 = value;
-            var lastData_1 = data;
-            var lastDisabled_1 = !!disabled;
-            var lastHidden_1 = !!hidden;
             var commands = {
                 getType: function () { return 'FormDateRangePicker'; },
                 getName: function () { return name; },
                 getReset: function () { return getFinalValue(initValue); },
-                reset: function () {
-                    lastValue_1 = getFinalValue(initValue);
-                    changeValue(lastValue_1);
-                },
-                getValue: function () { return lastValue_1; },
-                setValue: function (value) {
-                    lastValue_1 = getFinalValue(value);
-                    changeValue(lastValue_1);
-                },
-                getData: function () { return lastData_1; },
-                setData: function (data) {
-                    lastData_1 = data;
-                    setData(data);
-                },
-                getFromValue: function () { return lastValue_1[0]; },
-                setFromValue: function (value) {
-                    lastValue_1 = [value, lastValue_1[1]];
-                    changeValue(lastValue_1);
-                },
-                getToValue: function () { return lastValue_1[1]; },
-                setToValue: function (value) {
-                    lastValue_1 = [lastValue_1[0], value];
-                    changeValue(lastValue_1);
-                },
+                reset: function () { return setValue(initValue); },
+                getValue: function () { return valueRef.current; },
+                setValue: function (value) { return setValue(value); },
+                getData: function () { return dataRef.current; },
+                setData: function (data) { return setData(data); },
+                getFromValue: function () { return valueRef.current[0]; },
+                setFromValue: function (value) { return setValue([value, valueRef.current[1]]); },
+                getToValue: function () { return valueRef.current[1]; },
+                setToValue: function (value) { return setValue([valueRef.current[0], value]); },
                 isExceptValue: function () { return !!exceptValue; },
-                isDisabled: function () { return lastDisabled_1; },
-                setDisabled: function (disabled) {
-                    lastDisabled_1 = disabled;
-                    setDisabled(disabled);
-                },
-                isHidden: function () { return lastHidden_1; },
-                setHidden: function (hidden) {
-                    lastHidden_1 = hidden;
-                    setHidden(hidden);
-                },
+                isDisabled: function () { return !!disabledRef.current; },
+                setDisabled: function (disabled) { return setDisabled(disabled); },
+                isHidden: function () { return !!hiddenRef.current; },
+                setHidden: function (hidden) { return setHidden(hidden); },
                 focus: focus,
                 focusValidate: focusValidate,
-                validate: function () { return validate(value); },
+                validate: function () { return validate(valueRef.current); },
                 setError: function (error, errorText) {
                     return setErrorErrorHelperText(error, error ? errorText : undefined);
                 },
@@ -8572,29 +8189,29 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
             };
         }
     }, [
-        name,
-        initValue,
-        value,
-        getFinalValue,
+        dataRef,
+        disabledRef,
         exceptValue,
-        disabled,
         focus,
         focusValidate,
-        validate,
         formValueFormat,
         formValueFromNameSuffix,
         formValueToNameSuffix,
-        ref,
+        getFinalValue,
+        hiddenRef,
+        id,
+        initValue,
+        name,
         onAddValueItem,
         onRemoveValueItem,
-        id,
+        ref,
+        setData,
         setDisabled,
         setErrorErrorHelperText,
-        data,
-        setData,
-        hidden,
         setHidden,
-        changeValue,
+        setValue,
+        validate,
+        valueRef,
     ]);
     /********************************************************************************************************************
      * Render
@@ -8696,7 +8313,8 @@ FormDateRangePicker.defaultProps = FormDateRangePickerDefaultProps;var FormFileD
 };
 LinkDialog.displayName = 'LinkDialog';
 LinkDialog.defaultProps = LinkDialogDefaultProps;var css_248z$1 = ".FormFile .control-wrap {\n  display: inline-flex;\n}\n.FormFile .control-wrap .file-name-wrap .file-name {\n  min-width: 350px;\n}\n.FormFile .control-wrap .file-name-wrap .file-name .MuiInputBase-root {\n  padding-right: 7px;\n}\n.FormFile .control-wrap .input-file {\n  display: none;\n}\n.FormFile .control-wrap .form-file-btn {\n  min-width: 0;\n  padding: 0;\n}\n.FormFile .control-wrap .form-file-btn label {\n  cursor: pointer;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  padding: 0 10px;\n}\n.FormFile .control-wrap .form-file-btn label .PdgIcon {\n  margin-right: 5px;\n}\n.FormFile .control-wrap .form-file-btn.hidden-label label .PdgIcon {\n  margin-left: 0;\n  margin-right: 0;\n}\n.FormFile .control-wrap .input-file-wrap {\n  display: flex;\n}\n.FormFile .control-wrap .input-file-wrap .input-file-btn .PdgIcon {\n  margin-left: -3px;\n}\n.FormFile .control-wrap .input-file-wrap .form-file-btn:first-of-type:not(:last-of-type) {\n  border-right: 0;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.FormFile .control-wrap .input-file-wrap .form-file-btn:last-of-type:not(:first-of-type) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.FormFile .control-wrap .input-file-wrap .form-file-btn:not(:first-of-type):not(:last-of-type) {\n  border-right: 0;\n  border-radius: 0;\n}\n.FormFile.full-width .control-wrap {\n  display: flex;\n}\n.FormFile.full-width .control-wrap .file-name-wrap {\n  flex: 1;\n}\n.FormFile.variant-standard .file-name-wrap .file-name .MuiInputBase-root {\n  padding-right: 0;\n}\n\n.FormFile:not(.hide-file-name).variant-outlined .form-file-btn label, .FormFile:not(.hide-file-name).variant-filled .form-file-btn label {\n  padding-top: 10px;\n  padding-bottom: 10px;\n}\n.FormFile:not(.hide-file-name).variant-standard .form-file-btn label {\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n.FormFile:not(.hide-file-name).size-small .form-file-btn label {\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.FormFile.hide-file-name:not(.with-label).variant-outlined .form-file-btn {\n  height: 52px;\n}\n.FormFile.hide-file-name:not(.with-label).variant-filled .form-file-btn {\n  height: 52px;\n}\n.FormFile.hide-file-name:not(.with-label).variant-standard .form-file-btn {\n  height: 28px;\n}\n.FormFile.hide-file-name:not(.with-label).size-small.variant-outlined .form-file-btn {\n  height: 37px;\n}\n.FormFile.hide-file-name:not(.with-label).size-small.variant-filled .form-file-btn {\n  height: 44px;\n}\n.FormFile.hide-file-name:not(.with-label).size-small.variant-standard .form-file-btn {\n  height: 26px;\n}\n.FormFile.hide-file-name.with-label.variant-outlined .form-file-btn {\n  height: 37px;\n}\n.FormFile.hide-file-name.with-label.variant-filled .form-file-btn {\n  height: 37px;\n}\n.FormFile.hide-file-name.with-label.variant-standard .form-file-btn {\n  height: 28px;\n}\n.FormFile.hide-file-name.with-label.size-small.variant-outlined .form-file-btn {\n  height: 24px;\n}\n.FormFile.hide-file-name.with-label.size-small.variant-filled .form-file-btn {\n  height: 31px;\n}\n.FormFile.hide-file-name.with-label.size-small.variant-standard .form-file-btn {\n  height: 26px;\n}\n\n.Form .FormCol.with-label .FormFile.hide-file-name.variant-outlined .form-file-btn {\n  height: 37px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.variant-filled .form-file-btn {\n  height: 37px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.variant-standard .form-file-btn {\n  height: 28px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-outlined .form-file-btn {\n  height: 24px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-filled .form-file-btn {\n  height: 31px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-standard .form-file-btn {\n  height: 26px;\n}";
-styleInject(css_248z$1);var FormFile = React.forwardRef(function (_a, ref) {
+styleInject(css_248z$1);var FILE_VALUE = '';
+var FormFile = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * ID
      * ******************************************************************************************************************/
@@ -8732,11 +8350,11 @@ styleInject(css_248z$1);var FormFile = React.forwardRef(function (_a, ref) {
      * ******************************************************************************************************************/
     var _c = useAutoUpdateState(initError), error = _c[0], setError = _c[1];
     var _d = useState(), errorHelperText = _d[0], setErrorHelperText = _d[1];
-    var _e = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _e[0], setDisabled = _e[1];
-    var _f = useAutoUpdateState(initHidden), hidden = _f[0], setHidden = _f[1];
-    var _g = useState(false), isOpenLinkDialog = _g[0], setIsOpenLinkDialog = _g[1];
-    var _h = useAutoUpdateState(initData), data = _h[0], setData = _h[1];
-    var _j = useState({ open: false }), alertDialogProps = _j[0], setAlertDialogProps = _j[1];
+    var _e = useState(false), isOpenLinkDialog = _e[0], setIsOpenLinkDialog = _e[1];
+    var _f = useState({ open: false }), alertDialogProps = _f[0], setAlertDialogProps = _f[1];
+    var _g = useAutoUpdateRefState(initData), dataRef = _g[0], setData = _g[2];
+    var _h = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _h[0], disabled = _h[1], setDisabled = _h[2];
+    var _j = useAutoUpdateRefState(initHidden), hiddenRef = _j[0], hidden = _j[1], setHidden = _j[2];
     /********************************************************************************************************************
      * Function - setErrorErrorHelperText
      * ******************************************************************************************************************/
@@ -8772,26 +8390,15 @@ styleInject(css_248z$1);var FormFile = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * State - value
      * ******************************************************************************************************************/
-    var _k = useState(initValue || ''), value = _k[0], setValue = _k[1];
-    var fileValue = useState('')[0];
-    var changeValue = useCallback(function (newValue) {
-        if (!equal(value, newValue)) {
-            setValue(newValue);
-            nextTick(function () {
-                if (error)
-                    validate(newValue);
-                if (onChange)
-                    onChange(newValue);
-                onValueChange(name, newValue);
-            });
-        }
-    }, [error, name, onChange, onValueChange, validate, value]);
-    /********************************************************************************************************************
-     * Effect
-     * ******************************************************************************************************************/
+    var getFinalValue = useCallback(function (value) { return value || ''; }, []);
+    var _k = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _k[0], value = _k[1], setValue = _k[2];
     useFirstSkipEffect(function () {
-        changeValue(initValue || '');
-    }, [initValue]);
+        if (error)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
@@ -8821,42 +8428,23 @@ styleInject(css_248z$1);var FormFile = React.forwardRef(function (_a, ref) {
      * Commands
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
-        var lastValue = value;
-        var lastData = data;
-        var lastDisabled = !!disabled;
-        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormFile'; },
             getName: function () { return name; },
-            getReset: function () { return initValue || ''; },
-            reset: function () {
-                lastValue = initValue || '';
-                changeValue(lastValue);
-            },
-            getValue: function () { return lastValue; },
-            setValue: function (value) {
-                lastValue = value;
-                changeValue(lastValue);
-            },
-            getData: function () { return lastData; },
-            setData: function (data) {
-                lastData = data;
-                setData(data);
-            },
+            getReset: function () { return getFinalValue(initValue); },
+            reset: function () { return setValue(initValue); },
+            getValue: function () { return valueRef.current; },
+            setValue: function (value) { return setValue(value); },
+            getData: function () { return dataRef.current; },
+            setData: function (data) { return setData(data); },
             isExceptValue: function () { return !!exceptValue; },
-            isDisabled: function () { return lastDisabled; },
-            setDisabled: function (disabled) {
-                lastDisabled = disabled;
-                setDisabled(disabled);
-            },
-            isHidden: function () { return lastHidden; },
-            setHidden: function (hidden) {
-                lastHidden = hidden;
-                setHidden(hidden);
-            },
+            isDisabled: function () { return !!disabledRef.current; },
+            setDisabled: function (disabled) { return setDisabled(disabled); },
+            isHidden: function () { return !!hiddenRef.current; },
+            setHidden: function (hidden) { return setHidden(hidden); },
             focus: focus,
             focusValidate: focus,
-            validate: function () { return validate(value); },
+            validate: function () { return validate(valueRef.current); },
             setError: function (error, errorHelperText) {
                 return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
             },
@@ -8882,24 +8470,25 @@ styleInject(css_248z$1);var FormFile = React.forwardRef(function (_a, ref) {
             }
         };
     }, [
-        name,
-        initValue,
-        value,
+        dataRef,
+        disabledRef,
         exceptValue,
-        disabled,
         focus,
-        validate,
-        ref,
+        getFinalValue,
+        hiddenRef,
+        id,
+        initValue,
+        name,
         onAddValueItem,
         onRemoveValueItem,
-        id,
+        ref,
+        setData,
         setDisabled,
         setErrorErrorHelperText,
-        data,
-        setData,
-        hidden,
         setHidden,
-        changeValue,
+        setValue,
+        validate,
+        valueRef,
     ]);
     /********************************************************************************************************************
      * Function
@@ -8947,7 +8536,7 @@ styleInject(css_248z$1);var FormFile = React.forwardRef(function (_a, ref) {
             var file_1 = target.files[0];
             fileSizeCheck(file_1).then(function () {
                 onFile(file_1).then(function (url) {
-                    changeValue(url);
+                    setValue(url);
                     nextTick(function () {
                         if (onValueChangeByUser)
                             onValueChangeByUser(name, url);
@@ -8955,21 +8544,21 @@ styleInject(css_248z$1);var FormFile = React.forwardRef(function (_a, ref) {
                 });
             });
         }
-    }, [changeValue, fileSizeCheck, name, onFile, onValueChangeByUser]);
+    }, [fileSizeCheck, name, onFile, onValueChangeByUser, setValue]);
     var handleLinkClick = useCallback(function () {
         setIsOpenLinkDialog(true);
     }, []);
     var handleRemoveClick = useCallback(function () {
-        changeValue('');
+        setValue('');
         nextTick(function () {
             if (onValueChangeByUser)
                 onValueChangeByUser(name, '');
         });
-    }, [changeValue, name, onValueChangeByUser]);
+    }, [name, onValueChangeByUser, setValue]);
     var handleLinkDialogConfirm = useCallback(function (url) {
         if (onLink) {
             onLink(url).then(function (finalUrl) {
-                changeValue(finalUrl);
+                setValue(finalUrl);
                 nextTick(function () {
                     if (onValueChangeByUser)
                         onValueChangeByUser(name, finalUrl);
@@ -8977,13 +8566,13 @@ styleInject(css_248z$1);var FormFile = React.forwardRef(function (_a, ref) {
             });
         }
         else {
-            changeValue(url);
+            setValue(url);
             nextTick(function () {
                 if (onValueChangeByUser)
                     onValueChangeByUser(name, url);
             });
         }
-    }, [changeValue, name, onLink, onValueChangeByUser]);
+    }, [name, onLink, onValueChangeByUser, setValue]);
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
@@ -9004,7 +8593,7 @@ styleInject(css_248z$1);var FormFile = React.forwardRef(function (_a, ref) {
                                         React.createElement("label", { htmlFor: id },
                                             React.createElement(PdgIcon, null, "upload"),
                                             !hideUploadLabel && (uploadLabel || '파일 업로드'))),
-                                    React.createElement("input", { type: 'file', accept: accept, id: id, value: fileValue, className: 'input-file', onChange: handleFileChange }))),
+                                    React.createElement("input", { type: 'file', accept: accept, id: id, value: FILE_VALUE, className: 'input-file', onChange: handleFileChange }))),
                                 !hideLink && (React.createElement(Button, { variant: 'text', tabIndex: linkTabIndex == null ? -1 : linkTabIndex, className: classNames('link-btn  form-file-btn', !!hideLinkLabel && 'hidden-label'), color: error ? 'error' : color, disabled: readOnly || disabled, ref: linkBtnRef, onClick: handleLinkClick },
                                     React.createElement("label", null,
                                         React.createElement(PdgIcon, null, "link"),
@@ -9020,7 +8609,7 @@ styleInject(css_248z$1);var FormFile = React.forwardRef(function (_a, ref) {
                         React.createElement("label", { htmlFor: id },
                             React.createElement(PdgIcon, null, "upload"),
                             !hideUploadLabel && (uploadLabel || '파일 업로드'))),
-                    React.createElement("input", { type: 'file', accept: accept, id: id, value: fileValue, className: 'input-file', onChange: handleFileChange }))),
+                    React.createElement("input", { type: 'file', accept: accept, id: id, value: FILE_VALUE, className: 'input-file', onChange: handleFileChange }))),
                 !hideLink && (React.createElement(Button, { variant: 'outlined', tabIndex: linkTabIndex, className: classNames('link-btn form-file-btn', !!hideLinkLabel && 'hidden-label'), color: error ? 'error' : color, onClick: handleLinkClick, disabled: disabled, ref: linkBtnRef },
                     React.createElement("label", null,
                         React.createElement(PdgIcon, null, "link"),
@@ -9036,16 +8625,26 @@ FormFile.displayName = 'FormFile';
 FormFile.defaultProps = FormFileDefaultProps;var FormImageFileDefaultProps = __assign(__assign({}, FormFileDefaultProps), { accept: '.jpg,.jpeg,.png' });var css_248z = ".FormImageFile .preview-img {\n  max-width: 100%;\n}\n.FormImageFile:not(.hide-file-name):not(.variant-standard) .preview-img {\n  padding-right: 14px;\n}";
 styleInject(css_248z);var FormImageFile = React.forwardRef(function (_a, ref) {
     var className = _a.className, imageSize = _a.imageSize, preview = _a.preview, previewMaxHeight = _a.previewMaxHeight, initValue = _a.value, onChange = _a.onChange, onFile = _a.onFile, onLink = _a.onLink, props = __rest(_a, ["className", "imageSize", "preview", "previewMaxHeight", "value", "onChange", "onFile", "onLink"]);
-    var _b = useAutoUpdateState(initValue), value = _b[0], setValue = _b[1];
-    var _c = useState({
+    var _b = useState({
         open: false,
-    }), alertDialogProps = _c[0], setAlertDialogProps = _c[1];
+    }), alertDialogProps = _b[0], setAlertDialogProps = _b[1];
     var urlKit = useState(function () {
         if (window.URL)
             return window.URL;
         else if (window.webkitURL)
             return window.webkitURL;
     })[0];
+    /********************************************************************************************************************
+     * value
+     * ******************************************************************************************************************/
+    var getFinalValue = useCallback(function (value) {
+        return value || '';
+    }, []);
+    var _c = useAutoUpdateState(initValue, getFinalValue), value = _c[0], setValue = _c[1];
+    useFirstSkipEffect(function () {
+        if (onChange)
+            onChange(value);
+    }, [value]);
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
@@ -9115,8 +8714,7 @@ styleInject(css_248z);var FormImageFile = React.forwardRef(function (_a, ref) {
      * ******************************************************************************************************************/
     var handleChange = useCallback(function (value) {
         setValue(value);
-        onChange && onChange(value);
-    }, [onChange, setValue]);
+    }, [setValue]);
     var handleFile = useCallback(function (file) {
         return new Promise(function (resolve, reject) {
             imageSizeCheck(file)
@@ -9229,16 +8827,10 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
      * ******************************************************************************************************************/
     var _c = useAutoUpdateState(initError), error = _c[0], setError = _c[1];
     var _d = useState(), errorHelperText = _d[0], setErrorHelperText = _d[1];
-    var _e = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _e[0], setDisabled = _e[1];
-    var _f = useAutoUpdateState(initHidden), hidden = _f[0], setHidden = _f[1];
-    var _g = useAutoUpdateState(initData), data = _g[0], setData = _g[1];
-    var _h = useState(false), open = _h[0], setOpen = _h[1];
-    /********************************************************************************************************************
-     * Function - getFinalValue
-     * ******************************************************************************************************************/
-    var getFinalValue = useCallback(function (value) {
-        return value || DEFAULT_VALUE$3;
-    }, []);
+    var _e = useState(false), open = _e[0], setOpen = _e[1];
+    var _f = useAutoUpdateRefState(initData), dataRef = _f[0], setData = _f[2];
+    var _g = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _g[0], disabled = _g[1], setDisabled = _g[2];
+    var _h = useAutoUpdateRefState(initHidden), hiddenRef = _h[0], hidden = _h[1], setHidden = _h[2];
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
@@ -9266,24 +8858,19 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
         return true;
     }, [onValidate, required, setErrorErrorHelperText]);
     /********************************************************************************************************************
-     * State - value
+     * value
      * ******************************************************************************************************************/
-    var _j = useState(function () { return getFinalValue(initValue); }), value = _j[0], setValue = _j[1];
-    var changeValue = useCallback(function (newValue) {
-        if (!equal(value, newValue)) {
-            setValue(newValue);
-            nextTick(function () {
-                if (error)
-                    validate(newValue);
-                if (onChange)
-                    onChange(newValue);
-                onValueChange(name, newValue);
-            });
-        }
-    }, [error, name, onChange, onValueChange, validate, value]);
+    var getFinalValue = useCallback(function (value) {
+        return value || DEFAULT_VALUE$3;
+    }, []);
+    var _j = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _j[0], value = _j[1], setValue = _j[2];
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(initValue));
-    }, [initValue]);
+        if (error)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
@@ -9369,60 +8956,39 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
      * Commands
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
-        var lastValue = value;
-        var lastData = data;
-        var lastDisabled = !!disabled;
-        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormMonthPicker'; },
             getName: function () { return name; },
             getReset: function () { return getFinalValue(initValue); },
-            reset: function () {
-                lastValue = getFinalValue(initValue);
-                changeValue(lastValue);
-            },
-            getValue: function () { return lastValue; },
-            setValue: function (value) {
-                lastValue = getFinalValue(value);
-                changeValue(lastValue);
-            },
-            getData: function () { return lastData; },
-            setData: function (data) {
-                lastData = data;
-                setData(data);
-            },
-            getYear: function () { return (lastValue ? lastValue.year : null); },
+            reset: function () { return setValue(initValue); },
+            getValue: function () { return valueRef.current; },
+            setValue: function (value) { return setValue(value); },
+            getData: function () { return dataRef.current; },
+            setData: function (data) { return setData(data); },
+            getYear: function () { return (valueRef.current ? valueRef.current.year : null); },
             setYear: function (year) {
-                lastValue = getFinalValue(year === null
+                setValue(year === null
                     ? null
-                    : lastValue
-                        ? { year: year, month: lastValue.month }
+                    : valueRef.current
+                        ? { year: year, month: valueRef.current.month }
                         : { year: year, month: year === new Date().getFullYear() ? new Date().getMonth() + 1 : 1 });
-                changeValue(lastValue);
             },
-            getMonth: function () { return (lastValue ? lastValue.month : null); },
+            getMonth: function () { return (valueRef.current ? valueRef.current.month : null); },
             setMonth: function (month) {
-                lastValue = getFinalValue(month === null
+                setValue(month === null
                     ? null
-                    : lastValue
-                        ? { year: lastValue.year, month: month }
+                    : valueRef.current
+                        ? { year: valueRef.current.year, month: month }
                         : { year: new Date().getFullYear(), month: month });
-                changeValue(lastValue);
             },
             isExceptValue: function () { return !!exceptValue; },
-            isDisabled: function () { return lastDisabled; },
-            setDisabled: function (disabled) {
-                lastDisabled = disabled;
-                setDisabled(disabled);
-            },
-            isHidden: function () { return lastHidden; },
-            setHidden: function (hidden) {
-                lastHidden = hidden;
-                setHidden(hidden);
-            },
+            isDisabled: function () { return !!disabledRef.current; },
+            setDisabled: function (disabled) { return setDisabled(disabled); },
+            isHidden: function () { return !!hiddenRef.current; },
+            setHidden: function (hidden) { return setHidden(hidden); },
             focus: focus,
             focusValidate: focus,
-            validate: function () { return validate(value); },
+            validate: function () { return validate(valueRef.current); },
             setError: function (error, errorHelperText) {
                 return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
             },
@@ -9460,27 +9026,27 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
             }
         };
     }, [
-        name,
-        initValue,
-        value,
-        getFinalValue,
+        dataRef,
+        disabledRef,
         exceptValue,
-        disabled,
         focus,
-        validate,
-        ref,
+        formValueMonthNameSuffix,
+        formValueYearNameSuffix,
+        getFinalValue,
+        hiddenRef,
+        id,
+        initValue,
+        name,
         onAddValueItem,
         onRemoveValueItem,
-        id,
+        ref,
+        setData,
         setDisabled,
         setErrorErrorHelperText,
-        data,
-        setData,
-        formValueYearNameSuffix,
-        formValueMonthNameSuffix,
-        hidden,
         setHidden,
-        changeValue,
+        setValue,
+        validate,
+        valueRef,
     ]);
     /********************************************************************************************************************
      * Event Handler
@@ -9511,13 +9077,13 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
         }
     }, []);
     var handleContainerChange = useCallback(function (newValue, isMonthSelect) {
-        changeValue(newValue);
+        setValue(newValue);
         if (isMonthSelect)
             setOpen(false);
         nextTick(function () {
             onValueChangeByUser(name, newValue);
         });
-    }, [changeValue, name, onValueChangeByUser]);
+    }, [name, onValueChangeByUser, setValue]);
     var handleInputDatePickerFocus = useCallback(function () {
         if (readOnly || disabled)
             return;
@@ -9564,7 +9130,7 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
                     }, title: React.createElement("div", { style: { display: 'flex' } },
                         React.createElement(PrivateMonthPicker, { minValue: minValue, maxValue: maxValue, disablePast: disablePast, disableFuture: disableFuture, value: value, onChange: handleContainerChange })) },
                     React.createElement("div", null,
-                        React.createElement(PrivateInputDatePicker, __assign({}, inputDatePickerProps, { style: inputStyle, sx: sx, value: valueDate, label: label, labelIcon: labelIcon, error: error, focused: focused, required: required, readOnly: readOnly, readOnlyInput: readOnlyInput, icon: icon, startAdornment: startAdornment, endAdornment: endAdornment, inputRef: inputRef, onChange: function (v) { return changeValue(v ? dateToValue(v) : v); }, onFocus: handleInputDatePickerFocus, onError: function (reason) { return (inputDatePickerErrorRef.current = reason); }, shouldDisableYear: handleInputDatePickerShouldDisableYear })))),
+                        React.createElement(PrivateInputDatePicker, __assign({}, inputDatePickerProps, { style: inputStyle, sx: sx, value: valueDate, label: label, labelIcon: labelIcon, error: error, focused: focused, required: required, readOnly: readOnly, readOnlyInput: readOnlyInput, icon: icon, startAdornment: startAdornment, endAdornment: endAdornment, inputRef: inputRef, onChange: function (v) { return setValue(v ? dateToValue(v) : v); }, onFocus: handleInputDatePickerFocus, onError: function (reason) { return (inputDatePickerErrorRef.current = reason); }, shouldDisableYear: handleInputDatePickerShouldDisableYear })))),
                 !formColWithHelperText && (!!helperText || (error && !!errorHelperText)) && (React.createElement(FormHelperText, { error: error, style: { marginLeft: variant === 'standard' ? 0 : 14 } }, error ? errorHelperText : helperText))))));
 });
 FormMonthPicker.displayName = 'FormMonthPicker';
@@ -9628,16 +9194,10 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
     var _f = useState(), fromErrorHelperText = _f[0], setFromErrorHelperText = _f[1];
     var _g = useState(false), toError = _g[0], setToError = _g[1];
     var _h = useState(), toErrorHelperText = _h[0], setToErrorHelperText = _h[1];
-    var _j = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _j[0], setDisabled = _j[1];
-    var _k = useAutoUpdateState(initHidden), hidden = _k[0], setHidden = _k[1];
-    var _l = useAutoUpdateState(initData), data = _l[0], setData = _l[1];
-    var _m = useState(false), open = _m[0], setOpen = _m[1];
-    /********************************************************************************************************************
-     * Function - getFinalValue
-     * ******************************************************************************************************************/
-    var getFinalValue = useCallback(function (value) {
-        return value || DEFAULT_VALUE$2;
-    }, []);
+    var _j = useState(false), open = _j[0], setOpen = _j[1];
+    var _k = useAutoUpdateRefState(initData), dataRef = _k[0], setData = _k[2];
+    var _l = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _l[0], disabled = _l[1], setDisabled = _l[2];
+    var _m = useAutoUpdateRefState(initHidden), hiddenRef = _m[0], hidden = _m[1], setHidden = _m[2];
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
@@ -9692,22 +9252,17 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * State - value
      * ******************************************************************************************************************/
-    var _o = useState(function () { return getFinalValue(initValue); }), value = _o[0], setValue = _o[1];
-    var changeValue = useCallback(function (newValue) {
-        if (!equal(value, newValue)) {
-            setValue(newValue);
-            nextTick(function () {
-                if (error || fromError || toError)
-                    validate(value);
-                if (onChange)
-                    onChange(newValue);
-                onValueChange(name, newValue);
-            });
-        }
-    }, [error, fromError, name, onChange, onValueChange, toError, validate, value]);
+    var getFinalValue = useCallback(function (value) {
+        return value || DEFAULT_VALUE$2;
+    }, []);
+    var _o = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _o[0], value = _o[1], setValue = _o[2];
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(initValue));
-    }, [initValue]);
+        if (error || fromError || toError)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
@@ -9785,100 +9340,71 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
      * Commands
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
-        var lastValue = value;
-        var lastData = data;
-        var lastDisabled = !!disabled;
-        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormMonthRangePicker'; },
             getName: function () { return name; },
             getReset: function () { return getFinalValue(initValue); },
-            reset: function () {
-                lastValue = getFinalValue(initValue);
-                changeValue(lastValue);
-            },
-            getValue: function () { return lastValue; },
-            setValue: function (value) {
-                lastValue = getFinalValue(value);
-                changeValue(lastValue);
-            },
-            getData: function () { return lastData; },
-            setData: function (data) {
-                lastData = data;
-                setData(data);
-            },
-            getFromValue: function () { return lastValue[0]; },
-            setFromValue: function (value) {
-                lastValue = [value, lastValue[1]];
-                changeValue(lastValue);
-            },
-            getToValue: function () { return lastValue[1]; },
-            setToValue: function (value) {
-                lastValue = [lastValue[0], value];
-                changeValue(lastValue);
-            },
-            getFromYear: function () { return (lastValue[0] ? lastValue[0].year : null); },
+            reset: function () { return setValue(initValue); },
+            getValue: function () { return valueRef.current; },
+            setValue: function (value) { return setValue(value); },
+            getData: function () { return dataRef.current; },
+            setData: function (data) { return setData(data); },
+            getFromValue: function () { return valueRef.current[0]; },
+            setFromValue: function (value) { return setValue([value, valueRef.current[1]]); },
+            getToValue: function () { return valueRef.current[1]; },
+            setToValue: function (value) { return setValue([valueRef.current[0], value]); },
+            getFromYear: function () { return (valueRef.current[0] ? valueRef.current[0].year : null); },
             setFromYear: function (year) {
-                lastValue = getFinalValue([
+                setValue([
                     year === null
                         ? null
-                        : lastValue[0]
-                            ? { year: year, month: lastValue[0].month }
+                        : valueRef.current[0]
+                            ? { year: year, month: valueRef.current[0].month }
                             : { year: year, month: year === new Date().getFullYear() ? new Date().getMonth() + 1 : 1 },
-                    lastValue[1],
+                    valueRef.current[1],
                 ]);
-                changeValue(lastValue);
             },
-            getFromMonth: function () { return (lastValue[0] ? lastValue[0].month : null); },
+            getFromMonth: function () { return (valueRef.current[0] ? valueRef.current[0].month : null); },
             setFromMonth: function (month) {
-                lastValue = getFinalValue([
+                setValue([
                     month === null
                         ? null
-                        : lastValue[0]
-                            ? { year: lastValue[0].year, month: month }
+                        : valueRef.current[0]
+                            ? { year: valueRef.current[0].year, month: month }
                             : { year: new Date().getFullYear(), month: month },
-                    lastValue[1],
+                    valueRef.current[1],
                 ]);
-                changeValue(lastValue);
             },
-            getToYear: function () { return (lastValue[1] ? lastValue[1].year : null); },
+            getToYear: function () { return (valueRef.current[1] ? valueRef.current[1].year : null); },
             setToYear: function (year) {
-                lastValue = getFinalValue([
-                    lastValue[0],
+                setValue([
+                    valueRef.current[0],
                     year === null
                         ? null
-                        : lastValue[1]
-                            ? { year: year, month: lastValue[1].month }
+                        : valueRef.current[1]
+                            ? { year: year, month: valueRef.current[1].month }
                             : { year: year, month: year === new Date().getFullYear() ? new Date().getMonth() + 1 : 1 },
                 ]);
-                changeValue(lastValue);
             },
-            getToMonth: function () { return (lastValue[1] ? lastValue[1].month : null); },
+            getToMonth: function () { return (valueRef.current[1] ? valueRef.current[1].month : null); },
             setToMonth: function (month) {
-                lastValue = getFinalValue([
-                    lastValue[0],
+                setValue([
+                    valueRef.current[0],
                     month === null
                         ? null
-                        : lastValue[1]
-                            ? { year: lastValue[1].year, month: month }
+                        : valueRef.current[1]
+                            ? { year: valueRef.current[1].year, month: month }
                             : { year: new Date().getFullYear(), month: month },
                 ]);
-                changeValue(lastValue);
             },
             isExceptValue: function () { return !!exceptValue; },
-            isDisabled: function () { return lastDisabled; },
-            setDisabled: function (disabled) {
-                lastDisabled = disabled;
-                setDisabled(disabled);
-            },
-            isHidden: function () { return lastHidden; },
-            setHidden: function (hidden) {
-                lastHidden = hidden;
-                setHidden(hidden);
-            },
+            isDisabled: function () { return !!disabledRef.current; },
+            setDisabled: function (disabled) { return setDisabled(disabled); },
+            isHidden: function () { return !!hiddenRef.current; },
+            setHidden: function (hidden) { return setHidden(hidden); },
             focus: focus,
             focusValidate: focus,
-            validate: function () { return validate(value); },
+            validate: function () { return validate(valueRef.current); },
             setError: function (error, errorHelperText) {
                 return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
             },
@@ -9928,35 +9454,35 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
             }
         };
     }, [
-        name,
-        initValue,
-        value,
-        getFinalValue,
+        dataRef,
+        disabledRef,
         exceptValue,
-        disabled,
         focus,
-        validate,
-        ref,
+        formValueFromMonthNameSuffix,
+        formValueFromYearNameSuffix,
+        formValueToMonthNameSuffix,
+        formValueToYearNameSuffix,
+        getFinalValue,
+        hiddenRef,
+        id,
+        initValue,
+        name,
         onAddValueItem,
         onRemoveValueItem,
-        id,
+        ref,
+        setData,
         setDisabled,
         setErrorErrorHelperText,
-        data,
-        setData,
-        formValueFromYearNameSuffix,
-        formValueFromMonthNameSuffix,
-        formValueToYearNameSuffix,
-        formValueToMonthNameSuffix,
-        hidden,
         setHidden,
-        changeValue,
+        setValue,
+        validate,
+        valueRef,
     ]);
     /********************************************************************************************************************
      * Event Handler
      * ******************************************************************************************************************/
     var handleContainerChange = useCallback(function (newValue, selectType, isMonthSelect) {
-        changeValue(newValue);
+        setValue(newValue);
         if (selectType === 'start' && isMonthSelect) {
             nextTick(function () {
                 var _a;
@@ -9969,11 +9495,11 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
         nextTick(function () {
             onValueChangeByUser(name, newValue);
         });
-    }, [changeValue, name, onValueChangeByUser]);
+    }, [name, onValueChangeByUser, setValue]);
     var handleInputDatePickerChange = useCallback(function (selectType, date) {
         if (date == null || date.isValid()) {
             if (selectType === 'start') {
-                var newValue_1 = [date ? dateToValue(date) : null, value[1]];
+                var newValue_1 = [date ? dateToValue(date) : null, valueRef.current[1]];
                 if (newValue_1[0] !== null &&
                     valueToYm(newValue_1[0]) >= minAvailableYm &&
                     valueToYm(newValue_1[0]) <= maxAvailableYm) {
@@ -9987,10 +9513,10 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
                 nextTick(function () {
                     onValueChangeByUser(name, newValue_1);
                 });
-                changeValue(newValue_1);
+                setValue(newValue_1);
             }
             else {
-                var newValue_2 = [value[0], date ? dateToValue(date) : null];
+                var newValue_2 = [valueRef.current[0], date ? dateToValue(date) : null];
                 if (newValue_2[1] !== null &&
                     valueToYm(newValue_2[1]) >= minAvailableYm &&
                     valueToYm(newValue_2[1]) <= maxAvailableYm) {
@@ -10004,17 +9530,17 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
                 nextTick(function () {
                     onValueChangeByUser(name, newValue_2);
                 });
-                changeValue(newValue_2);
+                setValue(newValue_2);
             }
         }
     }, [
         dateToValue,
-        value,
+        valueRef,
         valueToYm,
         minAvailableYm,
         maxAvailableYm,
         fromError,
-        changeValue,
+        setValue,
         validate,
         onValueChangeByUser,
         name,
@@ -10132,16 +9658,13 @@ var FormYearPicker = React.forwardRef(function (_a, ref) {
      * ******************************************************************************************************************/
     var _c = useAutoUpdateState(initError), error = _c[0], setError = _c[1];
     var _d = useState(), errorHelperText = _d[0], setErrorHelperText = _d[1];
-    var _e = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _e[0], setDisabled = _e[1];
-    var _f = useAutoUpdateState(initHidden), hidden = _f[0], setHidden = _f[1];
-    var _g = useAutoUpdateState(initData), data = _g[0], setData = _g[1];
-    var _h = useState(false), open = _h[0], setOpen = _h[1];
+    var _e = useState(false), open = _e[0], setOpen = _e[1];
+    var _f = useAutoUpdateRefState(initData), dataRef = _f[0], setData = _f[2];
+    var _g = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _g[0], disabled = _g[1], setDisabled = _g[2];
+    var _h = useAutoUpdateRefState(initHidden), hiddenRef = _h[0], hidden = _h[1], setHidden = _h[2];
     /********************************************************************************************************************
      * Function - getFinalValue
      * ******************************************************************************************************************/
-    var getFinalValue = useCallback(function (value) {
-        return value || DEFAULT_VALUE$1;
-    }, []);
     var setErrorErrorHelperText = useCallback(function (error, errorHelperText) {
         setError(error);
         setErrorHelperText(errorHelperText);
@@ -10166,24 +9689,19 @@ var FormYearPicker = React.forwardRef(function (_a, ref) {
         return true;
     }, [onValidate, required, setErrorErrorHelperText]);
     /********************************************************************************************************************
-     * State - value
+     * value
      * ******************************************************************************************************************/
-    var _j = useState(function () { return getFinalValue(initValue); }), value = _j[0], setValue = _j[1];
-    var changeValue = useCallback(function (newValue) {
-        if (!equal(value, newValue)) {
-            setValue(newValue);
-            nextTick(function () {
-                if (error)
-                    validate(newValue);
-                if (onChange)
-                    onChange(newValue);
-                onValueChange(name, newValue);
-            });
-        }
-    }, [error, name, onChange, onValueChange, validate, value]);
+    var getFinalValue = useCallback(function (newValue) {
+        return newValue || DEFAULT_VALUE$1;
+    }, []);
+    var _j = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _j[0], value = _j[1], setValue = _j[2];
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(initValue));
-    }, [initValue]);
+        if (error)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
@@ -10243,42 +9761,23 @@ var FormYearPicker = React.forwardRef(function (_a, ref) {
      * Commands
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
-        var lastValue = value;
-        var lastData = data;
-        var lastDisabled = !!disabled;
-        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormYearPicker'; },
             getName: function () { return name; },
             getReset: function () { return getFinalValue(initValue); },
-            reset: function () {
-                lastValue = getFinalValue(initValue);
-                changeValue(lastValue);
-            },
-            getValue: function () { return lastValue; },
-            setValue: function (value) {
-                lastValue = getFinalValue(value);
-                changeValue(lastValue);
-            },
-            getData: function () { return lastData; },
-            setData: function (data) {
-                lastData = data;
-                setData(data);
-            },
+            reset: function () { return setValue(initValue); },
+            getValue: function () { return valueRef.current; },
+            setValue: setValue,
+            getData: function () { return dataRef.current; },
+            setData: setData,
             isExceptValue: function () { return !!exceptValue; },
-            isDisabled: function () { return lastDisabled; },
-            setDisabled: function (disabled) {
-                lastDisabled = disabled;
-                setDisabled(disabled);
-            },
-            isHidden: function () { return lastHidden; },
-            setHidden: function (hidden) {
-                lastHidden = hidden;
-                setHidden(hidden);
-            },
+            isDisabled: function () { return !!disabledRef.current; },
+            setDisabled: setDisabled,
+            isHidden: function () { return !!hiddenRef.current; },
+            setHidden: setHidden,
             focus: focus,
             focusValidate: focus,
-            validate: function () { return validate(value); },
+            validate: function () { return validate(valueRef.current); },
             setError: function (error, errorHelperText) {
                 return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
             },
@@ -10304,25 +9803,25 @@ var FormYearPicker = React.forwardRef(function (_a, ref) {
             }
         };
     }, [
-        name,
-        initValue,
-        value,
-        getFinalValue,
+        dataRef,
+        disabledRef,
         exceptValue,
-        disabled,
         focus,
-        validate,
-        ref,
+        getFinalValue,
+        hiddenRef,
+        id,
+        initValue,
+        name,
         onAddValueItem,
         onRemoveValueItem,
-        id,
+        ref,
+        setData,
         setDisabled,
         setErrorErrorHelperText,
-        data,
-        setData,
-        hidden,
         setHidden,
-        changeValue,
+        setValue,
+        validate,
+        valueRef,
     ]);
     /********************************************************************************************************************
      * Event Handler
@@ -10353,20 +9852,20 @@ var FormYearPicker = React.forwardRef(function (_a, ref) {
         }
     }, []);
     var handleContainerChange = useCallback(function (newValue, isClick) {
-        changeValue(newValue);
+        setValue(newValue);
         if (isClick)
             setOpen(false);
         nextTick(function () {
             onValueChangeByUser(name, newValue);
         });
-    }, [changeValue, name, onValueChangeByUser]);
+    }, [name, onValueChangeByUser, setValue]);
     var handleInputDatePickerChange = useCallback(function (v) {
         var newValue = v ? dateToValue(v) : v;
-        changeValue(newValue);
+        setValue(newValue);
         nextTick(function () {
             onValueChangeByUser(name, newValue);
         });
-    }, [changeValue, dateToValue, name, onValueChangeByUser]);
+    }, [dateToValue, name, onValueChangeByUser, setValue]);
     var handleInputDatePickerFocus = useCallback(function () {
         if (readOnly || disabled)
             return;
@@ -10468,17 +9967,11 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
     var _f = useState(), fromErrorHelperText = _f[0], setFromErrorHelperText = _f[1];
     var _g = useState(false), toError = _g[0], setToError = _g[1];
     var _h = useState(), toErrorHelperText = _h[0], setToErrorHelperText = _h[1];
-    var _j = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _j[0], setDisabled = _j[1];
-    var _k = useAutoUpdateState(initHidden), hidden = _k[0], setHidden = _k[1];
-    var _l = useAutoUpdateState(initData), data = _l[0], setData = _l[1];
-    var _m = useState(false), open = _m[0], setOpen = _m[1];
-    var _o = useState('start'), selectType = _o[0], setSelectType = _o[1];
-    /********************************************************************************************************************
-     * Function - getFinalValue
-     * ******************************************************************************************************************/
-    var getFinalValue = useCallback(function (value) {
-        return value || DEFAULT_VALUE;
-    }, []);
+    var _j = useState(false), open = _j[0], setOpen = _j[1];
+    var _k = useState('start'), selectType = _k[0], setSelectType = _k[1];
+    var _l = useAutoUpdateRefState(initData), dataRef = _l[0], setData = _l[2];
+    var _m = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _m[0], disabled = _m[1], setDisabled = _m[2];
+    var _o = useAutoUpdateRefState(initHidden), hiddenRef = _o[0], hidden = _o[1], setHidden = _o[2];
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
@@ -10533,22 +10026,17 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * State - value
      * ******************************************************************************************************************/
-    var _p = useState(function () { return getFinalValue(initValue); }), value = _p[0], setValue = _p[1];
-    var changeValue = useCallback(function (newValue) {
-        if (!equal(value, newValue)) {
-            setValue(newValue);
-            nextTick(function () {
-                if (error || fromError || toError)
-                    validate(value);
-                if (onChange)
-                    onChange(newValue);
-                onValueChange(name, newValue);
-            });
-        }
-    }, [error, fromError, name, onChange, onValueChange, toError, validate, value]);
+    var getFinalValue = useCallback(function (value) {
+        return value || DEFAULT_VALUE;
+    }, []);
+    var _p = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _p[0], value = _p[1], setValue = _p[2];
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(initValue));
-    }, [initValue]);
+        if (error || fromError || toError)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
@@ -10603,52 +10091,27 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
      * Commands
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
-        var lastValue = value;
-        var lastData = data;
-        var lastDisabled = !!disabled;
-        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormYearRangePicker'; },
             getName: function () { return name; },
             getReset: function () { return getFinalValue(initValue); },
-            reset: function () {
-                lastValue = getFinalValue(initValue);
-                changeValue(lastValue);
-            },
-            getValue: function () { return lastValue; },
-            setValue: function (value) {
-                lastValue = getFinalValue(value);
-                changeValue(lastValue);
-            },
-            getData: function () { return lastData; },
-            setData: function (data) {
-                lastData = data;
-                setData(data);
-            },
-            getFromValue: function () { return lastValue[0]; },
-            setFromValue: function (value) {
-                lastValue = [value, lastValue[1]];
-                changeValue(lastValue);
-            },
-            getToValue: function () { return lastValue[1]; },
-            setToValue: function (value) {
-                lastValue = [lastValue[0], value];
-                changeValue(lastValue);
-            },
+            reset: function () { return setValue(initValue); },
+            getValue: function () { return valueRef.current; },
+            setValue: setValue,
+            getData: function () { return dataRef.current; },
+            setData: setData,
+            getFromValue: function () { return valueRef.current[0]; },
+            setFromValue: function (value) { return setValue([value, valueRef.current[1]]); },
+            getToValue: function () { return valueRef.current[1]; },
+            setToValue: function (value) { return setValue([valueRef.current[0], value]); },
             isExceptValue: function () { return !!exceptValue; },
-            isDisabled: function () { return lastDisabled; },
-            setDisabled: function (disabled) {
-                lastDisabled = disabled;
-                setDisabled(disabled);
-            },
-            isHidden: function () { return lastHidden; },
-            setHidden: function (hidden) {
-                lastHidden = hidden;
-                setHidden(hidden);
-            },
+            isDisabled: function () { return !!disabledRef.current; },
+            setDisabled: setDisabled,
+            isHidden: function () { return !!hiddenRef.current; },
+            setHidden: setHidden,
             focus: focus,
             focusValidate: focus,
-            validate: function () { return validate(value); },
+            validate: function () { return validate(valueRef.current); },
             setError: function (error, errorHelperText) {
                 return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
             },
@@ -10684,33 +10147,33 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
             }
         };
     }, [
-        name,
-        initValue,
-        value,
-        getFinalValue,
+        dataRef,
+        disabledRef,
         exceptValue,
-        disabled,
         focus,
-        validate,
-        ref,
+        formValueFromNameSuffix,
+        formValueToNameSuffix,
+        getFinalValue,
+        hiddenRef,
+        id,
+        initValue,
+        name,
         onAddValueItem,
         onRemoveValueItem,
-        id,
+        ref,
+        setData,
         setDisabled,
         setErrorErrorHelperText,
-        data,
-        setData,
-        formValueFromNameSuffix,
-        formValueToNameSuffix,
-        hidden,
         setHidden,
-        changeValue,
+        setValue,
+        validate,
+        valueRef,
     ]);
     /********************************************************************************************************************
      * Event Handler
      * ******************************************************************************************************************/
     var handleContainerChange = useCallback(function (newValue, selectType) {
-        changeValue(newValue);
+        setValue(newValue);
         if (selectType === 'start') {
             nextTick(function () {
                 var _a;
@@ -10724,11 +10187,11 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
         nextTick(function () {
             onValueChangeByUser(name, newValue);
         });
-    }, [changeValue, name, onValueChangeByUser]);
+    }, [setValue, name, onValueChangeByUser]);
     var handleInputDatePickerChange = useCallback(function (selectType, date) {
         if (date == null || date.isValid()) {
             if (selectType === 'start') {
-                var newValue_1 = [date ? dateToValue(date) : null, value[1]];
+                var newValue_1 = [date ? dateToValue(date) : null, valueRef.current[1]];
                 if (newValue_1[0] !== null && newValue_1[0] >= minYear && newValue_1[0] <= maxYear) {
                     if (newValue_1[1] !== null && newValue_1[1] < newValue_1[0]) {
                         newValue_1[1] = newValue_1[0];
@@ -10740,10 +10203,10 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
                 nextTick(function () {
                     onValueChangeByUser(name, newValue_1);
                 });
-                changeValue(newValue_1);
+                setValue(newValue_1);
             }
             else {
-                var newValue_2 = [value[0], date ? dateToValue(date) : null];
+                var newValue_2 = [valueRef.current[0], date ? dateToValue(date) : null];
                 if (newValue_2[1] !== null && newValue_2[1] >= minYear && newValue_2[1] <= maxYear) {
                     if (newValue_2[0] !== null && newValue_2[0] > newValue_2[1]) {
                         newValue_2[0] = newValue_2[1];
@@ -10755,22 +10218,22 @@ var FormYearRangePicker = React.forwardRef(function (_a, ref) {
                 nextTick(function () {
                     onValueChangeByUser(name, newValue_2);
                 });
-                changeValue(newValue_2);
+                setValue(newValue_2);
             }
         }
-    }, [dateToValue, value, minYear, maxYear, fromError, changeValue, validate, onValueChangeByUser, name, toError]);
+    }, [dateToValue, valueRef, minYear, maxYear, fromError, setValue, validate, onValueChangeByUser, name, toError]);
     var handleInputDatePickerFocus = useCallback(function (selectType) {
         var _a;
         if (readOnly || disabled)
             return;
-        if (selectType === 'end' && value[0] == null) {
+        if (selectType === 'end' && valueRef.current[0] == null) {
             (_a = startInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
         else {
             setSelectType(selectType);
             setOpen(true);
         }
-    }, [readOnly, disabled, value]);
+    }, [readOnly, disabled, valueRef]);
     var handleInputDatePickerShouldDisableYear = useCallback(function (year) {
         return (!!disablePast && year.year() < nowYear) || (!!disableFuture && year.year() > nowYear);
     }, [disableFuture, disablePast, nowYear]);
@@ -10861,15 +10324,9 @@ FormYearRangePicker.defaultProps = FormYearRangePickerDefaultProps;var FormSwitc
      * ******************************************************************************************************************/
     var _d = useAutoUpdateState(initError), error = _d[0], setError = _d[1];
     var _e = useState(), errorHelperText = _e[0], setErrorHelperText = _e[1];
-    var _f = useAutoUpdateState(initDisabled == null ? formDisabled : initDisabled), disabled = _f[0], setDisabled = _f[1];
-    var _g = useAutoUpdateState(initHidden), hidden = _g[0], setHidden = _g[1];
-    var _h = useAutoUpdateState(initData), data = _h[0], setData = _h[1];
-    /********************************************************************************************************************
-     * Function - getFinalValue
-     * ******************************************************************************************************************/
-    var getFinalValue = useCallback(function (value) {
-        return onValue ? onValue(value) : value;
-    }, [onValue]);
+    var _f = useAutoUpdateRefState(initData), dataRef = _f[0], setData = _f[2];
+    var _g = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _g[0], disabled = _g[1], setDisabled = _g[2];
+    var _h = useAutoUpdateRefState(initHidden), hiddenRef = _h[0], hidden = _h[1], setHidden = _h[2];
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
@@ -10891,22 +10348,18 @@ FormYearRangePicker.defaultProps = FormYearRangePickerDefaultProps;var FormSwitc
     /********************************************************************************************************************
      * State - value
      * ******************************************************************************************************************/
-    var _j = useState(function () { return getFinalValue(initValue || false); }), value = _j[0], setValue = _j[1];
-    var changeValue = useCallback(function (newValue) {
-        if (!equal(value, newValue)) {
-            setValue(newValue);
-            nextTick(function () {
-                if (error)
-                    validate(newValue);
-                if (onChange)
-                    onChange(newValue);
-                onValueChange(name, newValue);
-            });
-        }
-    }, [error, name, onChange, onValueChange, validate, value]);
+    var getFinalValue = useCallback(function (value) {
+        var finalValue = value || false;
+        return onValue ? onValue(finalValue) : finalValue;
+    }, [onValue]);
+    var _j = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _j[0], value = _j[1], setValue = _j[2];
     useFirstSkipEffect(function () {
-        changeValue(getFinalValue(initValue || false));
-    }, [initValue]);
+        if (error)
+            validate(value);
+        if (onChange)
+            onChange(value);
+        onValueChange(name, value);
+    }, [value]);
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
@@ -10922,42 +10375,23 @@ FormYearRangePicker.defaultProps = FormYearRangePickerDefaultProps;var FormSwitc
      * Commands
      * ******************************************************************************************************************/
     useLayoutEffect(function () {
-        var lastValue = value;
-        var lastData = data;
-        var lastDisabled = !!disabled;
-        var lastHidden = !!hidden;
         var commands = {
             getType: function () { return 'FormSwitch'; },
             getName: function () { return name; },
-            getReset: function () { return getFinalValue(initValue || false); },
-            reset: function () {
-                lastValue = getFinalValue(initValue || false);
-                changeValue(lastValue);
-            },
-            getValue: function () { return lastValue; },
-            setValue: function (value) {
-                lastValue = getFinalValue(value);
-                changeValue(lastValue);
-            },
-            getData: function () { return lastData; },
-            setData: function (data) {
-                lastData = data;
-                setData(data);
-            },
+            getReset: function () { return getFinalValue(initValue); },
+            reset: function () { return setValue(initValue); },
+            getValue: function () { return valueRef.current; },
+            setValue: setValue,
+            getData: function () { return dataRef.current; },
+            setData: setData,
             isExceptValue: function () { return !!exceptValue; },
-            isDisabled: function () { return lastDisabled; },
-            setDisabled: function (disabled) {
-                lastDisabled = disabled;
-                setDisabled(disabled);
-            },
-            isHidden: function () { return lastHidden; },
-            setHidden: function (hidden) {
-                lastHidden = hidden;
-                setHidden(hidden);
-            },
+            isDisabled: function () { return !!disabledRef.current; },
+            setDisabled: setDisabled,
+            isHidden: function () { return !!hiddenRef.current; },
+            setHidden: setHidden,
             focus: focus,
             focusValidate: focus,
-            validate: function () { return validate(value); },
+            validate: function () { return validate(valueRef.current); },
             setError: function (error, errorHelperText) {
                 return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
             },
@@ -10983,25 +10417,25 @@ FormYearRangePicker.defaultProps = FormYearRangePickerDefaultProps;var FormSwitc
             }
         };
     }, [
-        name,
-        initValue,
-        value,
-        getFinalValue,
+        dataRef,
+        disabledRef,
         exceptValue,
-        disabled,
         focus,
-        validate,
-        ref,
+        getFinalValue,
+        hiddenRef,
+        id,
+        initValue,
+        name,
         onAddValueItem,
         onRemoveValueItem,
-        id,
+        ref,
+        setData,
         setDisabled,
         setErrorErrorHelperText,
-        data,
-        setData,
-        hidden,
         setHidden,
-        changeValue,
+        setValue,
+        validate,
+        valueRef,
     ]);
     /********************************************************************************************************************
      * Event Handler
@@ -11011,14 +10445,13 @@ FormYearRangePicker.defaultProps = FormYearRangePickerDefaultProps;var FormSwitc
             e.preventDefault();
         }
         else {
-            var finalValue_1 = getFinalValue(checked);
-            changeValue(finalValue_1);
+            var finalValue_1 = setValue(checked);
             nextTick(function () {
                 onValueChangeByUser(name, finalValue_1);
                 onRequestSearchSubmit(name, finalValue_1);
             });
         }
-    }, [readOnly, getFinalValue, changeValue, onValueChangeByUser, name, onRequestSearchSubmit]);
+    }, [readOnly, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/