Fix buttongroup infinite update loop (#5010)

* Fix buttongroup infinite update loop

Author: snowystinger

packages/@react-aria/utils/src/useValueEffect.ts

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Dispatch, useCallback, useRef, useState} from 'react';
-import {useLayoutEffect} from './';
+import {Dispatch, useRef, useState} from 'react';
+import {useEffectEvent, useLayoutEffect} from './';
 
 type SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;
 
@@ -21,48 +21,41 @@ type SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;
 // written linearly.
 export function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<SetValueAction<S>>] {
   let [value, setValue] = useState(defaultValue);
-  let valueRef = useRef(value);
   let effect = useRef(null);
 
-  // Must be stable so that `queue` is stable.
-  let nextIter = useCallback(() => {
+  // Store the function in a ref so we can always access the current version
+  // which has the proper `value` in scope.
+  let nextRef = useEffectEvent(() => {
     // Run the generator to the next yield.
     let newValue = effect.current.next();
-    while (!newValue.done && valueRef.current === newValue.value) {
-      // If the value is the same as the current value,
-      // then continue to the next yield. Otherwise,
-      // set the value in state and wait for the next layout effect.
-      newValue = effect.current.next();
-    }
+
     // If the generator is done, reset the effect.
     if (newValue.done) {
       effect.current = null;
       return;
     }
 
-    // Always update valueRef when setting the state.
-    // This is needed because the function is not regenerated with the new state value since
-    // they must be stable across renders. Instead, it gets carried in the ref, but the setState
-    // is also needed in order to cause a rerender.
-    setValue(newValue.value);
-    valueRef.current = newValue.value;
-    // this list of dependencies is stable, setState and refs never change after first render.
-  }, [setValue, valueRef, effect]);
+    // If the value is the same as the current value,
+    // then continue to the next yield. Otherwise,
+    // set the value in state and wait for the next layout effect.
+    if (value === newValue.value) {
+      nextRef();
+    } else {
+      setValue(newValue.value);
+    }
+  });
 
   useLayoutEffect(() => {
     // If there is an effect currently running, continue to the next yield.
     if (effect.current) {
-      nextIter();
+      nextRef();
     }
   });
 
-  // queue must be a stable function, much like setState.
-  let queue = useCallback(fn => {
-    effect.current = fn(valueRef.current);
-    nextIter();
-    // this list of dependencies is stable, setState and refs never change after first render.
-    // in addition, nextIter is stable as outlined above
-  }, [nextIter, effect, valueRef]);
+  let queue = useEffectEvent(fn => {
+    effect.current = fn(value);
+    nextRef();
+  });
 
   return [value, queue];
 }