@office-iss/react-native-win32 0.0.0-canary.271 → 0.0.0-canary.273

package/Libraries/Core/ExceptionsManager.js

@@ -22,10 +22,11 @@ type ExceptionDecorator = ExceptionData => ExceptionData;
 let userExceptionDecorator: ?ExceptionDecorator;
 let inUserExceptionDecorator = false;
 
-// This Symbol is used to decorate an ExtendedError with extra data in select usecases.
+// This string is used to decorate an ExtendedError with extra data in select usecases.
 // Note that data passed using this method should be strictly contained,
 // as data that's not serializable/too large may cause issues with passing the error to the native code.
-const decoratedExtraDataKey: symbol = Symbol('decoratedExtraDataKey');
+// TODO(T204185517): We should use a Symbol for this, but jsi through jsc doesn't support it yet.
+const decoratedExtraDataKey = 'RN$ErrorExtraDataKey';
 
 /**
  * Allows the app to add information to the exception report before it is sent

package/Libraries/Core/ReactNativeVersion.js

@@ -17,7 +17,7 @@ const version: $ReadOnly<{
   major: 0,
   minor: 77,
   patch: 0,
-  prerelease: 'nightly-20241010-0d6908f4e',
+  prerelease: 'nightly-20241020-e7a3f479f',
 };
 
 module.exports = {version};

package/Libraries/Core/setUpReactDevTools.js

@@ -11,6 +11,7 @@
 'use strict';
 
 import type {Domain} from '../../src/private/debugging/setUpFuseboxReactDevToolsDispatcher';
+import type {Spec as NativeReactDevToolsRuntimeSettingsModuleSpec} from '../../src/private/fusebox/specs/NativeReactDevToolsRuntimeSettingsModule';
 
 if (__DEV__) {
   // Register dispatcher on global, which can be used later by Chrome DevTools frontend
@@ -24,6 +25,8 @@ if (__DEV__) {
   const reactDevToolsSettingsManager = require('../../src/private/debugging/ReactDevToolsSettingsManager');
   const serializedHookSettings =
     reactDevToolsSettingsManager.getGlobalHookSettings();
+  const maybeReactDevToolsRuntimeSettingsModuleModule =
+    require('../../src/private/fusebox/specs/NativeReactDevToolsRuntimeSettingsModule').default;
 
   let hookSettings = null;
   if (serializedHookSettings != null) {
@@ -36,8 +39,14 @@ if (__DEV__) {
       );
     }
   }
+
+  const {
+    isProfiling: shouldStartProfilingNow,
+    profilingSettings: initialProfilingSettings,
+  } = readReloadAndProfileConfig(maybeReactDevToolsRuntimeSettingsModuleModule);
+
   // Install hook before React is loaded.
-  initialize(hookSettings);
+  initialize(hookSettings, shouldStartProfilingNow, initialProfilingSettings);
 
   // This should be defined in DEV, otherwise error is expected.
   const fuseboxReactDevToolsDispatcher =
@@ -63,6 +72,14 @@ if (__DEV__) {
   }
 
   function connectToReactDevToolsInFusebox(domain: Domain) {
+    const {
+      isReloadAndProfileSupported,
+      isProfiling,
+      onReloadAndProfile,
+      onReloadAndProfileFlagsReset,
+    } = readReloadAndProfileConfig(
+      maybeReactDevToolsRuntimeSettingsModuleModule,
+    );
     disconnect = connectWithCustomMessagingProtocol({
       onSubscribe: listener => {
         domain.onMessage.addEventListener(listener);
@@ -76,6 +93,10 @@ if (__DEV__) {
       nativeStyleEditorValidAttributes: Object.keys(ReactNativeStyleAttributes),
       resolveRNStyle,
       onSettingsUpdated: handleReactDevToolsSettingsUpdate,
+      isReloadAndProfileSupported,
+      isProfiling,
+      onReloadAndProfile,
+      onReloadAndProfileFlagsReset,
     });
   }
 
@@ -127,6 +148,14 @@ if (__DEV__) {
         isWebSocketOpen = true;
       });
 
+      const {
+        isReloadAndProfileSupported,
+        isProfiling,
+        onReloadAndProfile,
+        onReloadAndProfileFlagsReset,
+      } = readReloadAndProfileConfig(
+        maybeReactDevToolsRuntimeSettingsModuleModule,
+      );
       connectToDevTools({
         isAppActive,
         resolveRNStyle,
@@ -135,6 +164,10 @@ if (__DEV__) {
         ),
         websocket: ws,
         onSettingsUpdated: handleReactDevToolsSettingsUpdate,
+        isReloadAndProfileSupported,
+        isProfiling,
+        onReloadAndProfile,
+        onReloadAndProfileFlagsReset,
       });
     }
   }
@@ -166,3 +199,43 @@ if (__DEV__) {
   );
   connectToWSBasedReactDevToolsFrontend(); // Try connecting once on load
 }
+
+function readReloadAndProfileConfig(
+  maybeModule: ?NativeReactDevToolsRuntimeSettingsModuleSpec,
+) {
+  const isReloadAndProfileSupported = maybeModule != null;
+  const config = maybeModule?.getReloadAndProfileConfig();
+  const isProfiling = config?.shouldReloadAndProfile === true;
+  const profilingSettings = {
+    recordChangeDescriptions: config?.recordChangeDescriptions === true,
+    recordTimeline: false,
+  };
+  const onReloadAndProfile = (recordChangeDescriptions: boolean) => {
+    if (maybeModule == null) {
+      return;
+    }
+
+    maybeModule.setReloadAndProfileConfig({
+      shouldReloadAndProfile: true,
+      recordChangeDescriptions,
+    });
+  };
+  const onReloadAndProfileFlagsReset = () => {
+    if (maybeModule == null) {
+      return;
+    }
+
+    maybeModule.setReloadAndProfileConfig({
+      shouldReloadAndProfile: false,
+      recordChangeDescriptions: false,
+    });
+  };
+
+  return {
+    isReloadAndProfileSupported,
+    isProfiling,
+    profilingSettings,
+    onReloadAndProfile,
+    onReloadAndProfileFlagsReset,
+  };
+}

package/Libraries/Core/setUpTimers.js

@@ -21,6 +21,25 @@ if (__DEV__) {
   }
 }
 
+const isEventLoopEnabled = (() => {
+  if (NativeReactNativeFeatureFlags == null) {
+    return false;
+  }
+
+  if (NativeReactNativeFeatureFlags.disableEventLoopOnBridgeless == null) {
+    // Flags not unified yet
+    return (
+      ReactNativeFeatureFlags.useModernRuntimeScheduler() &&
+      ReactNativeFeatureFlags.enableMicrotasks()
+    );
+  } else {
+    return (
+      ReactNativeFeatureFlags.enableBridgelessArchitecture() &&
+      !ReactNativeFeatureFlags.disableEventLoopOnBridgeless()
+    );
+  }
+})();
+
 // In bridgeless mode, timers are host functions installed from cpp.
 if (global.RN$Bridgeless !== true) {
   /**
@@ -48,12 +67,7 @@ if (global.RN$Bridgeless !== true) {
   defineLazyTimer('cancelAnimationFrame');
   defineLazyTimer('requestIdleCallback');
   defineLazyTimer('cancelIdleCallback');
-} else if (
-  // TODO remove this condition when bridgeless == modern scheduler everywhere.
-  NativeReactNativeFeatureFlags != null &&
-  // eslint-disable-next-line react-hooks/rules-of-hooks -- false positive due to `use` prefix
-  ReactNativeFeatureFlags.useModernRuntimeScheduler()
-) {
+} else if (isEventLoopEnabled) {
   polyfillGlobal(
     'requestIdleCallback',
     () =>
@@ -72,10 +86,7 @@ if (global.RN$Bridgeless !== true) {
 // We need to check if the native module is available before accessing the
 // feature flag, because otherwise the API would throw an error in the legacy
 // architecture in OSS, where the native module isn't available.
-if (
-  NativeReactNativeFeatureFlags != null &&
-  ReactNativeFeatureFlags.enableMicrotasks()
-) {
+if (isEventLoopEnabled) {
   // This is the flag that tells React to use `queueMicrotask` to batch state
   // updates, instead of using the scheduler to schedule a regular task.
   // We use a global variable because we don't currently have any other

package/Libraries/Debugging/DebuggingOverlay.js

@@ -102,10 +102,9 @@ const styles = StyleSheet.create({
   },
 });
 
-const DebuggingOverlayWithForwardedRef: React.AbstractComponent<
-  {},
-  DebuggingOverlayHandle,
-  React.Node,
-> = React.forwardRef(DebuggingOverlay);
+const DebuggingOverlayWithForwardedRef: component(
+  ref: React.RefSetter<DebuggingOverlayHandle>,
+  ...props: {}
+) = React.forwardRef(DebuggingOverlay);
 
 export default DebuggingOverlayWithForwardedRef;

package/Libraries/Image/Image.android.js

@@ -166,11 +166,9 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       sources = [source];
     }
 
-    const {height, width, ...restProps} = props;
-
     const {onLoadStart, onLoad, onLoadEnd, onError} = props;
     const nativeProps = {
-      ...restProps,
+      ...props,
       style,
       shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError),
       // Both iOS and C++ sides expect to have "source" prop, whereas on Android it's "src"

package/Libraries/Image/Image.ios.js

@@ -145,9 +145,7 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
     'aria-selected': ariaSelected,
-    height,
     src,
-    width,
     ...restProps
   } = props;
 

package/Libraries/Image/Image.win32.js

@@ -164,9 +164,7 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     'aria-multiselectable': ariaMultiselectable, // Win32
     'aria-required': ariaRequired, // Win32
     'aria-selected': ariaSelected,
-    height,
     src,
-    width,
     ...restProps
   } = props;
 

package/Libraries/Image/ImageProps.js

@@ -20,7 +20,7 @@ import type {
 import type {LayoutEvent, SyntheticEvent} from '../Types/CoreEventTypes';
 import typeof Image from './Image';
 import type {ImageSource} from './ImageSource';
-import type {Node, Ref} from 'react';
+import type {ElementRef, Node, RefSetter} from 'react';
 
 export type ImageLoadEvent = SyntheticEvent<
   $ReadOnly<{|
@@ -77,7 +77,7 @@ type AndroidImageProps = $ReadOnly<{|
   resizeMultiplier?: ?number,
 |}>;
 
-export type ImageProps = {|
+export type ImageProps = $ReadOnly<{|
   ...$Diff<ViewProps, $ReadOnly<{|style: ?ViewStyleProp|}>>,
   ...IOSImageProps,
   ...AndroidImageProps,
@@ -266,7 +266,7 @@ export type ImageProps = {|
    */
   srcSet?: ?string,
   children?: empty,
-|};
+|}>;
 
 export type ImageBackgroundProps = $ReadOnly<{|
   ...ImageProps,
@@ -291,5 +291,5 @@ export type ImageBackgroundProps = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/imagebackground#imageref
    */
-  imageRef?: Ref<Image>,
+  imageRef?: RefSetter<ElementRef<Image>>,
 |}>;

package/Libraries/Image/ImageTypes.flow.js

@@ -56,18 +56,20 @@ type ImageComponentStaticsAndroid = $ReadOnly<{
   abortPrefetch(requestId: number): void,
 }>;
 
-export type AbstractImageAndroid = React.AbstractComponent<
-  ImagePropsType,
-  | React.ElementRef<TextInlineImageNativeComponent>
-  | React.ElementRef<ImageViewNativeComponent>,
->;
+export type AbstractImageAndroid = component(
+  ref: React.RefSetter<
+    | React.ElementRef<TextInlineImageNativeComponent>
+    | React.ElementRef<ImageViewNativeComponent>,
+  >,
+  ...props: ImagePropsType
+);
 
 export type ImageAndroid = AbstractImageAndroid & ImageComponentStaticsAndroid;
 
-export type AbstractImageIOS = React.AbstractComponent<
-  ImagePropsType,
-  React.ElementRef<ImageViewNativeComponent>,
->;
+export type AbstractImageIOS = component(
+  ref: React.RefSetter<React.ElementRef<ImageViewNativeComponent>>,
+  ...props: ImagePropsType
+);
 
 export type ImageIOS = AbstractImageIOS & ImageComponentStaticsIOS;
 

package/Libraries/Inspector/Inspector.js

@@ -17,6 +17,7 @@ import type {
 } from '../Renderer/shims/ReactNativeTypes';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
+
 import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 
 const View = require('../Components/View/View');

package/Libraries/Inspector/Inspector.win32.js

@@ -17,6 +17,7 @@ import type {
 } from '../Renderer/shims/ReactNativeTypes';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
+
 import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 
 const PressabilityDebug = require('../Pressability/PressabilityDebug');

package/Libraries/LogBox/LogBox.js

@@ -52,6 +52,17 @@ if (__DEV__) {
 
       isLogBoxInstalled = true;
 
+      if (global.RN$registerExceptionListener != null) {
+        global.RN$registerExceptionListener(
+          (error: ExtendedExceptionData & {preventDefault: () => mixed}) => {
+            if (!error.isFatal) {
+              error.preventDefault();
+              addException(error);
+            }
+          },
+        );
+      }
+
       // Trigger lazy initialization of module.
       require('../NativeModules/specs/NativeLogBox');
 
@@ -122,13 +133,15 @@ if (__DEV__) {
       }
     },
 
-    addException(error: ExtendedExceptionData): void {
-      if (isLogBoxInstalled) {
-        LogBoxData.addException(error);
-      }
-    },
+    addException,
   };
 
+  function addException(error: ExtendedExceptionData): void {
+    if (isLogBoxInstalled) {
+      LogBoxData.addException(error);
+    }
+  }
+
   const isRCTLogAdviceWarning = (...args: Array<mixed>) => {
     // RCTLogAdvice is a native logging function designed to show users
     // a message in the console, but not show it to them in Logbox.

package/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -8,13 +8,13 @@
  * @format
  */
 
+import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 import View from '../Components/View/View';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import * as LogBoxData from './Data/LogBoxData';
 import LogBoxLog from './Data/LogBoxLog';
 import LogBoxLogNotification from './UI/LogBoxNotification';
 import * as React from 'react';
-import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 
 type Props = $ReadOnly<{|
   logs: $ReadOnlyArray<LogBoxLog>,

package/Libraries/Modal/Modal.js

@@ -224,6 +224,9 @@ class Modal extends React.Component<Props, State> {
   }
 
   componentWillUnmount() {
+    if (Platform.OS === 'ios') {
+      this.setState({isRendered: false});
+    }
     if (this._eventSubscription) {
       this._eventSubscription.remove();
     }

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -294,6 +294,71 @@ const validAttributesForNonEventProps = {
   style: ReactNativeStyleAttributes,
 
   experimental_layoutConformance: true,
+
+  // ReactClippingViewManager @ReactProps
+  removeClippedSubviews: true,
+
+  // ReactViewManager @ReactProps
+  accessible: true,
+  hasTVPreferredFocus: true,
+  nextFocusDown: true,
+  nextFocusForward: true,
+  nextFocusLeft: true,
+  nextFocusRight: true,
+  nextFocusUp: true,
+
+  borderRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderBottomRightRadius: true,
+  borderBottomLeftRadius: true,
+  borderTopStartRadius: true,
+  borderTopEndRadius: true,
+  borderBottomStartRadius: true,
+  borderBottomEndRadius: true,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
+  borderStyle: true,
+  hitSlop: true,
+  pointerEvents: true,
+  nativeBackgroundAndroid: true,
+  nativeForegroundAndroid: true,
+  needsOffscreenAlphaCompositing: true,
+
+  borderColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderLeftColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderRightColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderTopColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderBottomColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderStartColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderEndColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderBlockColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderBlockEndColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderBlockStartColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  focusable: true,
+  backfaceVisibility: true,
 };
 
 // Props for bubbling and direct events

package/Libraries/ReactNative/AppRegistry.js

@@ -13,8 +13,8 @@ import type {RootTag} from '../Types/RootTagTypes';
 import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 import type {DisplayModeType} from './DisplayMode';
 
-import registerCallableModule from '../Core/registerCallableModule';
 import BugReporting from '../BugReporting/BugReporting';
+import registerCallableModule from '../Core/registerCallableModule';
 import createPerformanceLogger from '../Utilities/createPerformanceLogger';
 import infoLog from '../Utilities/infoLog';
 import SceneTracker from '../Utilities/SceneTracker';

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -7,7 +7,7 @@
  * @noformat
  * @nolint
  * @flow strict
- * @generated SignedSource<<9e6c8931d3b0c36d35ad5da90b721b85>>
+ * @generated SignedSource<<448b89d0a61a392d9c1eb921f7d51d37>>
  */
 
 import type {
@@ -140,13 +140,6 @@ declare const ensureNativeMethodsAreSynced: NativeMethods;
 export type HostInstance = NativeMethods;
 export type HostComponent<Config> = AbstractComponent<Config, HostInstance>;
 
-type SecretInternalsType = {
-  computeComponentStackForErrorReporting(tag: number): string,
-  // TODO (bvaughn) Decide which additional types to expose here?
-  // And how much information to fill in for the above types.
-  ...
-};
-
 type InspectorDataProps = $ReadOnly<{
   [propName: string]: string,
   ...
@@ -234,7 +227,6 @@ export type ReactNativeType = {
   unmountComponentAtNode(containerTag: number): void,
   unmountComponentAtNodeAndRemoveContainer(containerTag: number): void,
   +unstable_batchedUpdates: <T>(fn: (T) => void, bookkeeping: T) => void,
-  +__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: SecretInternalsType,
   ...
 };
 

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -56,7 +56,7 @@ export interface FlexStyle {
   borderWidth?: number | undefined;
   bottom?: DimensionValue | undefined;
   boxSizing?: 'border-box' | 'content-box' | undefined;
-  display?: 'none' | 'flex' | undefined;
+  display?: 'none' | 'flex' | 'contents' | undefined;
   end?: DimensionValue | undefined;
   flex?: number | undefined;
   flexBasis?: DimensionValue | undefined;

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -58,7 +58,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    *  It works similarly to `display` in CSS, but only support 'flex' and 'none'.
    *  'flex' is the default.
    */
-  display?: 'none' | 'flex',
+  display?: 'none' | 'flex' | 'contents',
 
   /** `width` sets the width of this component.
    *

package/Libraries/Text/Text.js

@@ -115,7 +115,7 @@ const Text: component(
 
     // TODO: Move this processing to the view configuration.
     const _selectionColor =
-      selectionColor == null ? null : processColor(selectionColor);
+      selectionColor != null ? processColor(selectionColor) : undefined;
 
     let _style = style;
     if (__DEV__) {
@@ -208,8 +208,6 @@ const Text: component(
           {...restProps}
           accessibilityLabel={_accessibilityLabel}
           accessibilityState={_accessibilityState}
-          isHighlighted={false}
-          isPressable={false}
           nativeID={_nativeID}
           numberOfLines={_numberOfLines}
           ref={forwardedRef}
@@ -288,7 +286,6 @@ const Text: component(
           allowFontScaling={allowFontScaling !== false}
           disabled={_disabled}
           ellipsizeMode={ellipsizeMode ?? 'tail'}
-          isHighlighted={false}
           nativeID={_nativeID}
           numberOfLines={_numberOfLines}
           ref={forwardedRef}

package/Libraries/Text/Text.win32.js

@@ -143,7 +143,7 @@ const Text: component(
 
     // TODO: Move this processing to the view configuration.
     const _selectionColor =
-      selectionColor == null ? null : processColor(selectionColor);
+      selectionColor != null ? processColor(selectionColor) : undefined;
 
     let _style = style;
     if (__DEV__) {
@@ -248,8 +248,6 @@ const Text: component(
           accessibilityLevel={_accessibilityLevel} // Win32
           accessibilityPositionInSet={_accessibilityPositionInSet} // Win32
           accessibilitySetSize={_accessibilitySetSize} // Win32
-          isHighlighted={false}
-          isPressable={false}
           nativeID={_nativeID}
           numberOfLines={_numberOfLines}
           ref={forwardedRef}
@@ -328,7 +326,6 @@ const Text: component(
           allowFontScaling={allowFontScaling !== false}
           disabled={_disabled}
           ellipsizeMode={ellipsizeMode ?? 'tail'}
-          isHighlighted={false}
           nativeID={_nativeID}
           numberOfLines={_numberOfLines}
           ref={forwardedRef}

package/Libraries/Utilities/FocusManager.win32.js

@@ -18,7 +18,7 @@ class FocusManager {
   // This function takes in a ref to a React Component and a bool value. If setWindowFocus = true, call aggressive focus.
   // Else, call polite focus
 
-  static focus(ref: React.Ref<any>, setWindowFocus: boolean) {
+  static focus(ref: React.RefObject<any>, setWindowFocus: boolean) {
     if (ref) {
       if (setWindowFocus) {
         UIManager.dispatchViewManagerCommand(

package/Libraries/Utilities/Platform.flow.win32.js

@@ -91,6 +91,7 @@ type AndroidPlatform = {
 
 type Win32Platform = {
   __constants: null,
+  // $FlowFixMe[cannot-resolve-name]
   OS: $TEMPORARY$string<'win32'>,
   // $FlowFixMe[unsafe-getters-setters]
   get Version(): number,

package/Libraries/Utilities/useMergeRefs.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import useRefEffect from './useRefEffect';
 import * as React from 'react';
 import {useCallback} from 'react';
 
@@ -22,19 +23,37 @@ import {useCallback} from 'react';
  */
 export default function useMergeRefs<Instance>(
   ...refs: $ReadOnlyArray<?React.RefSetter<Instance>>
-): (Instance | null) => void {
-  return useCallback(
-    (current: Instance | null) => {
-      for (const ref of refs) {
-        if (ref != null) {
+): React.RefSetter<Instance> {
+  const refEffect = useCallback(
+    (current: Instance) => {
+      const cleanups: $ReadOnlyArray<void | (() => void)> = refs.map(ref => {
+        if (ref == null) {
+          return undefined;
+        } else {
           if (typeof ref === 'function') {
-            ref(current);
+            // $FlowIssue[incompatible-type] - Flow does not understand ref cleanup.
+            const cleanup: void | (() => void) = ref(current);
+            return typeof cleanup === 'function'
+              ? cleanup
+              : () => {
+                  ref(null);
+                };
           } else {
             ref.current = current;
+            return () => {
+              ref.current = null;
+            };
           }
         }
-      }
+      });
+
+      return () => {
+        for (const cleanup of cleanups) {
+          cleanup?.();
+        }
+      };
     },
     [...refs], // eslint-disable-line react-hooks/exhaustive-deps
   );
+  return useRefEffect(refEffect);
 }