Fix lint warnings

Author: widavies

packages/@react-stately/form/src/useFormValidationState.ts

@@ -63,10 +63,20 @@ export interface FormValidationState {
 }
 
 export function useFormValidationState<T>(props: FormValidationProps<T>): FormValidationState {
+  const privateProp = props[privateValidationStateProp];
+
+  let privateState = useMemo(() => {
+    if (!privateProp) {
+      return null;
+    }
+
+    let {realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation} = privateProp as FormValidationState;
+    return {realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation};
+  }, [privateProp]);
+
   // Private prop for parent components to pass state to children.
-  if (props[privateValidationStateProp]) {
-    let {realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation} = props[privateValidationStateProp] as FormValidationState;
-    return useMemo(() => ({realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation}), [realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation]);
+  if (privateState) {
+    return privateState;
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks

packages/@react-stately/list/src/useSingleSelectListState.ts

@@ -13,7 +13,7 @@
 import {CollectionStateBase, Key, Node, Selection, SingleSelection} from '@react-types/shared';
 import {ListState, useListState} from './useListState';
 import {useControlledState} from '@react-stately/utils';
-import {useMemo, useCallback} from 'react';
+import {useCallback, useMemo} from 'react';
 
 export interface SingleSelectListProps<T> extends CollectionStateBase<T>, Omit<SingleSelection, 'disallowEmptySelection'> {
   /** Filter function to generate a filtered list of nodes. */

packages/@react-stately/select/package.json

@@ -22,6 +22,7 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
+    "@react-aria/utils": "^3.28.1",
     "@react-stately/form": "^3.1.2",
     "@react-stately/list": "^3.12.0",
     "@react-stately/overlays": "^3.6.14",

packages/@react-stately/select/src/useSelectState.ts

@@ -15,7 +15,7 @@ import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
 import {SelectProps} from '@react-types/select';
 import {SingleSelectListState, useSingleSelectListState} from '@react-stately/list';
-import {useState, useMemo, useEffect, useCallback, useRef} from 'react';
+import {useCallback, useLayoutEffect, useMemo, useRef, useState} from 'react';
 
 export interface SelectStateOptions<T> extends Omit<SelectProps<T>, 'children'>, CollectionStateBase<T> {}
 
@@ -45,25 +45,30 @@ export function useSelectState<T extends object>(props: SelectStateOptions<T>):
   let triggerState = useOverlayTriggerState(props);
   let [focusStrategy, setFocusStrategy] = useState<FocusStrategy | null>(null);
 
+  // This is necessary to circumvent a circular dependency below
   let validationStateRef = useRef<FormValidationState>(null);
 
+  let onSelectionChange = props.onSelectionChange;
   let listState = useSingleSelectListState({
     ...props,
     onSelectionChange: useCallback(key => {
-      if (props.onSelectionChange != null) {
-        props.onSelectionChange(key);
+      if (onSelectionChange != null) {
+        onSelectionChange(key);
       }
 
       triggerState.close();
       validationStateRef.current!.commitValidation();
-    }, [props.onSelectionChange, triggerState])
+    }, [onSelectionChange, triggerState])
   });
 
   let validationState = useFormValidationState({
     ...props,
     value: listState.selectedKey
   });
-  validationStateRef.current = validationState;
+  useLayoutEffect(() => {
+    validationStateRef.current = validationState;
+  }, [validationState]);
+  
 
   let [isFocused, setFocused] = useState(false);