Ensure that useObjectRef only calls function refs once in strict mode

packages/@react-aria/utils/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]);
 }

packages/@react-aria/utils/test/useObjectRef.test.js

@@ -52,6 +52,17 @@ describe('useObjectRef', () => {
     expect(inputElem.placeholder).toBe('Foo');
   });
 
+  it('should only be called once', () => {
+    const TextField = React.forwardRef((props, forwardedRef) => {
+      const ref = useObjectRef(forwardedRef);
+      return <input {...props} ref={ref} />;
+    });
+
+    let ref = jest.fn();
+    render(<TextField ref={ref} />);
+    expect(ref).toHaveBeenCalledTimes(1);
+  });
+
   /**
    * This describe would completely fail if `useObjectRef` did not account
    * for order of execution and rendering, especially when other components

packages/react-aria-components/src/utils.tsx

@@ -151,7 +151,7 @@ export function useContextProps<T, U, E extends Element>(props: T & SlotProps, r
   }
   // @ts-ignore - TS says "Type 'unique symbol' cannot be used as an index type." but not sure why.
   let {ref: contextRef, [slotCallbackSymbol]: callback, ...contextProps} = ctx;
-  let mergedRef = useObjectRef(mergeRefs(ref, contextRef));
+  let mergedRef = useObjectRef(useMemo(() => mergeRefs(ref, contextRef), [ref, contextRef]));
   let mergedProps = mergeProps(contextProps, props) as unknown as T;
 
   // A parent component might need the props from a child, so call slot callback if needed.