refactor: remove useRef

Author: boutahlilsoufiane

packages/@react-stately/datepicker/src/useDateFieldState.ts

@@ -171,8 +171,7 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   let v: DateValue | null = props.value || props.defaultValue || props.placeholderValue || null;
   let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
   let timeZone = defaultTimeZone || 'UTC';
-  const isValueConfirmed = useRef(props.value || props.defaultValue ? true : false)
-  const [shouldValidate, setShouldValidate] = useState(false)
+  const [shouldValidate, setShouldValidate] = useState(false);
 
   // props.granularity must actually exist in the value if one is provided.
   if (v && !(granularity in v)) {
@@ -188,7 +187,10 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     props.onChange
   );
 
-  const previousValue = useRef(value)
+  const [isValueConfirmed, setIsValueConfirmed] = useState(!!(value));
+
+
+  const previousValue = useRef(value);
 
   let [initialValue] = useState(value);
   let calendarValue = useMemo(() => convertValue(value, calendar) ?? null, [value, calendar]);
@@ -248,24 +250,23 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   if (value !== previousValue.current && value && Object.keys(validSegments).length <= Object.keys(allSegments).length) {
     validSegments = {...allSegments};
     setValidSegments(validSegments);
-    setPlaceholderDate(value)
-    previousValue.current = value
-    isValueConfirmed.current = true
+    setPlaceholderDate(value);
+    previousValue.current = value;
+    setIsValueConfirmed(true);
   }
 
 
-
   // If the value is set to null and all segments are valid, reset the placeholder.
   if (value !== previousValue.current && value == null && Object.keys(validSegments).length === Object.keys(allSegments).length) {
     validSegments = {};
-    setValidSegments(validSegments);   //reason 
+    setValidSegments(validSegments);   // reason 
     setPlaceholderDate(createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone));
-    previousValue.current = value
-    isValueConfirmed.current = true
+    previousValue.current = value;
+    setIsValueConfirmed(true);
   }
   // If all segments are valid, use the date from state, otherwise use the placeholder date.
-  let displayValue = isValueConfirmed.current && value ? value:  placeholderDate ;
-  const currentValue = useRef(displayValue)
+  let displayValue = isValueConfirmed && value ? value :  placeholderDate ;
+  const currentValue = useRef(displayValue);
   let setValue = (newValue: DateValue) => {
     if (props.isDisabled || props.isReadOnly) {
       return;
@@ -294,27 +295,28 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
       // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
       const value = toCalendar(newValue, v?.calendar || new GregorianCalendar());
       setDate(value);
-      previousValue.current = value
-      setPlaceholderDate(value)
+      setIsValueConfirmed(true);
+      previousValue.current = value;
+      setPlaceholderDate(value);
     }
-};
+  };
 
   let constrainDate = (value: DateValue) => {
-      const day = Math.max(1, Math.min(value.calendar.getDaysInMonth(value), value.day));
-      return setSegment(value, "day", day, resolvedOptions) 
-  }
+    const day = Math.max(1, Math.min(value.calendar.getDaysInMonth(value), value.day));
+    return setSegment(value, 'day', day, resolvedOptions); 
+  };
 
   let updatePlaceholder = (newValue: DateValue) => {
     if (props.isDisabled || props.isReadOnly) {
       return;
     }
-    currentValue.current = newValue
+    currentValue.current = newValue;
     setPlaceholderDate(newValue);
   };
 
   let dateValue = useMemo(() => displayValue.toDate(timeZone), [displayValue, timeZone]);
   let segments = useMemo(() => 
-    processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity, isValueConfirmed.current), 
+    processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity, isValueConfirmed), 
     [dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity]);
 
   // When the era field appears, mark it valid if the year field is already valid.
@@ -336,31 +338,29 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   };
 
   let adjustSegment = (type: Intl.DateTimeFormatPartTypes, amount: number) => {
-    isValueConfirmed.current = false
-    setShouldValidate(true)
- 
+    setShouldValidate(true);
+    setIsValueConfirmed(false);
+
     if (!validSegments[type]) {
       markValid(type);
       let validKeys = Object.keys(validSegments);
       let allKeys = Object.keys(allSegments);
       if (validKeys.length >= allKeys.length || (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod)) {
-        currentValue.current = displayValue
-        setValue(constrainDate(displayValue))
-      }else updatePlaceholder(displayValue)
+        currentValue.current = displayValue;
+        setValue(constrainDate(displayValue));
+      } else {updatePlaceholder(displayValue);}
     } else {
       let validKeys = Object.keys(validSegments);
       let allKeys = Object.keys(allSegments);
-      const v = addSegment(displayValue, type, amount, resolvedOptions)
+      const v = addSegment(displayValue, type, amount, resolvedOptions);
       if (validKeys.length >= allKeys.length || (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod)) {
-        currentValue.current = v
-        setValue(constrainDate(v))
-      }else {
-        updatePlaceholder(v)
+        currentValue.current = v;
+        setValue(constrainDate(v));
+      } else {
+        updatePlaceholder(v);
       }
     }
   };
-
-
 
 
   let builtinValidation = useMemo(() => getValidationResult(
@@ -411,25 +411,25 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
       adjustSegment(part, -(PAGE_STEP[part] || 1));
     },
     setSegment(part, v: string | number) {
-      isValueConfirmed.current = false
-      setShouldValidate(true)
+      setIsValueConfirmed(false);
+      setShouldValidate(true);
       markValid(part);
       updatePlaceholder(setSegment(displayValue, part, v, resolvedOptions));
     },
     incrementToMinMax(part, v: string | number)  {
-    isValueConfirmed.current = false
-    setShouldValidate(true)
-    markValid(part)
-    let validKeys = Object.keys(validSegments);
-    let allKeys = Object.keys(allSegments);
-    const value = setSegment(displayValue, part, v, resolvedOptions)
-    currentValue.current = value
-    if (validKeys.length >= allKeys.length || (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod)) {
-      setValue(constrainDate(value))
-    }else {
-      updatePlaceholder(value)
-    }
-  },
+      setIsValueConfirmed(false);
+      setShouldValidate(true);
+      markValid(part);
+      let validKeys = Object.keys(validSegments);
+      let allKeys = Object.keys(allSegments);
+      const value = setSegment(displayValue, part, v, resolvedOptions);
+      currentValue.current = value;
+      if (validKeys.length >= allKeys.length || (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod)) {
+        setValue(constrainDate(value));
+      } else {
+        updatePlaceholder(value);
+      }
+    },
     confirmPlaceholder() {
       if (props.isDisabled || props.isReadOnly) {
         return;
@@ -441,15 +441,15 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
       (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod && clearedSegment.current !== 'dayPeriod')) {
         validSegments = {...allSegments};
         setValidSegments(validSegments);
-        setValue(constrainDate(currentValue.current))
-      }else {
-        setDate(null)
-        previousValue.current = null
+        setValue(constrainDate(currentValue.current));
+      } else {
+        setDate(null);
+        setIsValueConfirmed(true);
+        previousValue.current = null;
       }
-      isValueConfirmed.current = true
     },
     clearSegment(part) {
-      isValueConfirmed.current = false
+      setIsValueConfirmed(false);
       delete validSegments[part];
       clearedSegment.current = part;
       setValidSegments({...validSegments});
@@ -504,20 +504,20 @@ function processSegments(dateValue, validSegments, dateFormatter, resolvedOption
     let isPlaceholder = EDITABLE_SEGMENTS[type] && !validSegments[type];
     let placeholder = EDITABLE_SEGMENTS[type] ? getPlaceholder(type, segment.value, locale) : null;
 
-    let value = segment.value
+    let value = segment.value;
 
-    if(!isConfirmed && ['day', 'month', 'year'].includes(segment.type)) {
-    let numberFormatter = new Intl.NumberFormat(locale, {
-      useGrouping: false
-    });
+    if (!isConfirmed && ['day', 'month', 'year'].includes(segment.type)) {
+      let numberFormatter = new Intl.NumberFormat(locale, {
+        useGrouping: false
+      });
 
-    let twoDigitFormatter = new Intl.NumberFormat(locale, {
-      useGrouping: false,
-      minimumIntegerDigits: 2
-    })
+      let twoDigitFormatter = new Intl.NumberFormat(locale, {
+        useGrouping: false,
+        minimumIntegerDigits: 2
+      });
 
-    let f = dateFormatter.resolvedOptions()[segment.type] === '2-digit' ? twoDigitFormatter : numberFormatter;
-    value = f.format(displayValue[segment.type]);
+      let f = dateFormatter.resolvedOptions()[segment.type] === '2-digit' ? twoDigitFormatter : numberFormatter;
+      value = f.format(displayValue[segment.type]);
     }
 
     let dateSegment = {