@react-aria/utils 3.16.0 → 3.18.0

package/src/useObjectRef.ts

@@ -10,8 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {MutableRefObject, useRef} from 'react';
-import {useLayoutEffect} from './';
+import {MutableRefObject, useMemo, useRef} from 'react';
 
 /**
  * Offers an object ref for a given callback ref or an object ref. Especially
@@ -24,31 +23,17 @@ import {useLayoutEffect} from './';
  */
 export function useObjectRef<T>(forwardedRef?: ((instance: T | null) => void) | MutableRefObject<T | null> | null): MutableRefObject<T> {
   const objRef = useRef<T>();
-
-  /**
-   * We're using `useLayoutEffect` here instead of `useEffect` because we want
-   * to make sure that the `ref` value is up to date before other places in the
-   * the execution cycle try to read it.
-   */
-  useLayoutEffect(() => {
-    if (!forwardedRef) {
-      return;
-    }
-
-    if (typeof forwardedRef === 'function') {
-      forwardedRef(objRef.current);
-    } else {
-      forwardedRef.current = objRef.current;
-    }
-
-    return () => {
+  return useMemo(() => ({
+    get current() {
+      return objRef.current;
+    },
+    set current(value) {
+      objRef.current = value;
       if (typeof forwardedRef === 'function') {
-        forwardedRef(null);
-      } else {
-        forwardedRef.current = null;
+        forwardedRef(value);
+      } else if (forwardedRef) {
+        forwardedRef.current = value;
       }
-    };
-  }, [forwardedRef]);
-
-  return objRef;
+    }
+  }), [forwardedRef]);
 }

package/src/useUpdateEffect.ts

@@ -15,13 +15,22 @@ import {EffectCallback, useEffect, useRef} from 'react';
 // Like useEffect, but only called for updates after the initial render.
 export function useUpdateEffect(effect: EffectCallback, dependencies: any[]) {
   const isInitialMount = useRef(true);
+  const lastDeps = useRef<any[] | null>(null);
+
+  useEffect(() => {
+    isInitialMount.current = true;
+    return () => {
+      isInitialMount.current = false;
+    };
+  }, []);
 
   useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
-    } else {
+    } else if (!lastDeps.current || dependencies.some((dep, i) => !Object.is(dep, lastDeps[i]))) {
       effect();
     }
+    lastDeps.current = dependencies;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, dependencies);
 }

package/src/useValueEffect.ts

@@ -24,42 +24,45 @@ export function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<Set
   let valueRef = useRef(value);
   let effect = useRef(null);
 
-  valueRef.current = value;
-
-  // Store the function in a ref so we can always access the current version
-  // which has the proper `value` in scope.
-  let nextRef = useRef(null);
-  nextRef.current = () => {
+  // Must be stable so that `queue` is stable.
+  let nextIter = useCallback(() => {
     // 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;
     }
 
-    // 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.current();
-    } else {
-      setValue(newValue.value);
-    }
-  };
+    // 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]);
 
   useLayoutEffect(() => {
     // If there is an effect currently running, continue to the next yield.
     if (effect.current) {
-      nextRef.current();
+      nextIter();
     }
   });
 
+  // queue must be a stable function, much like setState.
   let queue = useCallback(fn => {
     effect.current = fn(valueRef.current);
-    nextRef.current();
-  }, [effect, nextRef]);
+    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]);
 
   return [value, queue];
 }