Avoid ref overhead when not needed

packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js

@@ -41,7 +41,7 @@ function applyViewProps(
   tagName: string,
   isPressable: boolean,
   disabled: boolean,
-  elementRef: CallbackRef<HostInstance>,
+  elementRef: ?CallbackRef<HostInstance>,
   displayInsideValue: 'flow' | 'flex'
 ): 'flow' | 'flex' {
   // Tag-specific props
@@ -63,7 +63,9 @@ function applyViewProps(
     nativeProps.focusable = false;
   }
 
-  nativeProps.ref = elementRef;
+  if (elementRef != null) {
+    nativeProps.ref = elementRef;
+  }
 
   // Workaround: React Native doesn't support raw text children of View
   // Sometimes we can auto-fix this

packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js

@@ -26,7 +26,7 @@ import * as css from '../css';
 function applyImageProps(
   nativeProps: ReactNativeProps,
   props: StrictReactDOMImageProps,
-  elementRef: CallbackRef<HostInstance>
+  elementRef: ?CallbackRef<HostInstance>
 ): void {
   const {
     alt,
@@ -85,7 +85,9 @@ function applyImageProps(
 
   // Component-specific props
 
-  nativeProps.ref = elementRef;
+  if (elementRef != null) {
+    nativeProps.ref = elementRef;
+  }
 }
 
 export function createStrictDOMImageComponent<
@@ -107,12 +109,12 @@ export function createStrictDOMImageComponent<
      * Resolve global HTML and style props
      */
 
-    const defaultProps = {
-      style: [
-        _defaultProps?.style,
-        height != null && width != null && styles.aspectRatio(width, height)
-      ]
-    };
+    const defaultProps =
+      height != null && width != null
+        ? {
+            style: [_defaultProps?.style, styles.aspectRatio(width, height)]
+          }
+        : _defaultProps;
 
     const { nativeProps } = useNativeProps(defaultProps, props, {
       provideInheritableStyle: false,

packages/react-strict-dom/src/native/modules/createStrictDOMTextComponent.js

@@ -38,7 +38,7 @@ function applyTextProps(
   nativeProps: ReactNativeProps,
   props: StrictProps,
   tagName: string,
-  elementRef: CallbackRef<HostInstance>
+  elementRef: ?CallbackRef<HostInstance>
 ): void {
   const { href, label } = props;
 
@@ -70,7 +70,9 @@ function applyTextProps(
 
   // Component-specific props
 
-  nativeProps.ref = elementRef;
+  if (elementRef != null) {
+    nativeProps.ref = elementRef;
+  }
 
   // Workaround: Android doesn't support ellipsis truncation if Text is selectable
   // See #136

packages/react-strict-dom/src/native/modules/useStrictDOMElement.js

@@ -12,7 +12,6 @@ import type { HostInstance } from '../../types/renderer.native';
 
 import * as React from 'react';
 
-import { useElementCallback } from '../../shared/useElementCallback';
 import { useViewportScale } from './ContextViewportScale';
 
 type Options = {
@@ -168,32 +167,41 @@ function getOrCreateStrictRef(
 export function useStrictDOMElement<T>(
   ref: React.RefSetter<T>,
   { tagName }: Options
-): CallbackRef<HostInstance> {
+): ?CallbackRef<HostInstance> {
   const { scale: viewportScale } = useViewportScale();
 
-  return useElementCallback<HostInstance>(
-    React.useCallback(
-      (node: HostInstance) => {
-        if (ref == null) return undefined;
-        const strictRef = getOrCreateStrictRef(node, tagName, viewportScale);
-        if (typeof ref === 'function') {
-          // Public ref type is the DOM element `T` (web/native parity); at
-          // runtime we hand over the RN-backed strict wrapper.
-          // $FlowFixMe[incompatible-type] - Flow does not understand ref cleanup.
-          const cleanup: void | (() => void) = ref(strictRef as $FlowFixMe);
-          return typeof cleanup === 'function'
-            ? cleanup
+  return React.useMemo(() => {
+    if (ref == null) {
+      return null;
+    }
+    let cleanup: void | (() => void);
+    return (node: HostInstance | null) => {
+      if (cleanup != null) {
+        cleanup();
+        cleanup = undefined;
+      }
+      if (node == null) {
+        return;
+      }
+      const strictRef = getOrCreateStrictRef(node, tagName, viewportScale);
+      if (typeof ref === 'function') {
+        // Public ref type is the DOM element `T` (web/native parity); at
+        // runtime we hand over the RN-backed strict wrapper.
+        // $FlowFixMe[incompatible-type] - Flow does not understand ref cleanup.
+        const refCleanup: void | (() => void) = ref(strictRef as $FlowFixMe);
+        cleanup =
+          typeof refCleanup === 'function'
+            ? refCleanup
             : () => {
                 ref(null);
               };
-        }
-        // $FlowFixMe[incompatible-type] - see the ref-callback note above.
-        ref.current = strictRef;
-        return () => {
-          ref.current = null;
-        };
-      },
-      [ref, tagName, viewportScale]
-    )
-  );
+        return;
+      }
+      // $FlowFixMe[incompatible-type] - see the ref-callback note above.
+      ref.current = strictRef;
+      cleanup = () => {
+        ref.current = null;
+      };
+    };
+  }, [ref, tagName, viewportScale]);
 }

packages/react-strict-dom/tests/compat/__snapshots__/compat-test.native.js.snap

@@ -3,7 +3,6 @@
 exports[`<compat.native> "as" equals "div": as=div 1`] = `
 <View
   accessibilityLabel="label"
-  ref={[Function]}
   style={
     {
       "paddingHorizontal": 32,
@@ -15,7 +14,6 @@ exports[`<compat.native> "as" equals "div": as=div 1`] = `
 exports[`<compat.native> "as" equals "img": as=img 1`] = `
 <Image
   accessibilityLabel="label"
-  ref={[Function]}
   srcSet="1x.img, 2x.img 2x"
   style={
     {
@@ -40,7 +38,6 @@ exports[`<compat.native> "as" equals "span": as=span 1`] = `
 <Text
   accessibilityLabel="label"
   numberOfLines={3}
-  ref={[Function]}
   style={
     {
       "color": "blue",
@@ -65,7 +62,6 @@ exports[`<compat.native> "as" equals "textarea": as=textarea 1`] = `
 exports[`<compat.native> default: default 1`] = `
 <Pressable
   accessibilityLabel="label"
-  ref={[Function]}
   style={
     {
       "paddingHorizontal": 32,
@@ -77,11 +73,9 @@ exports[`<compat.native> default: default 1`] = `
 exports[`<compat.native> nested: nested 1`] = `
 <View
   accessibilityLabel="label"
-  ref={[Function]}
   style={{}}
 >
   <Text
-    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -99,7 +93,6 @@ exports[`<compat.native> nested: nested 1`] = `
 exports[`<compat.native> styled: styled 1`] = `
 <Pressable
   accessibilityLabel="label"
-  ref={[Function]}
   style={
     [
       {

packages/react-strict-dom/tests/contexts/__snapshots__/contexts-ThemeProvider-test.native.js.snap

@@ -2,7 +2,6 @@
 
 exports[`<contexts.*> <ThemeProvider> css variable declaration inside a media query 1`] = `
 <Text
-  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -17,7 +16,6 @@ exports[`<contexts.*> <ThemeProvider> css variable declaration inside a media qu
 exports[`<contexts.*> <ThemeProvider> defines global custom properties 1`] = `
 [
   <Text
-    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -29,7 +27,6 @@ exports[`<contexts.*> <ThemeProvider> defines global custom properties 1`] = `
     Expect color:green
   </Text>,
   <Text
-    ref={[Function]}
     style={
       {
         "backgroundColor": "red",
@@ -48,7 +45,6 @@ exports[`<contexts.*> <ThemeProvider> defines global custom properties 1`] = `
 exports[`<contexts.*> <ThemeProvider> kebab case string var to camel case 1`] = `
 [
   <Text
-    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -59,7 +55,6 @@ exports[`<contexts.*> <ThemeProvider> kebab case string var to camel case 1`] =
     }
   />,
   <Text
-    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -74,7 +69,6 @@ exports[`<contexts.*> <ThemeProvider> kebab case string var to camel case 1`] =
 
 exports[`<contexts.*> <ThemeProvider> number var lookup works 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
   style={
     {
       "borderWidth": 10,
@@ -88,7 +82,6 @@ exports[`<contexts.*> <ThemeProvider> number var lookup works 1`] = `
 exports[`<contexts.*> <ThemeProvider> number var value lookup with reference to another var 1`] = `
 [
   <ViewNativeComponent
-    ref={[Function]}
     style={
       {
         "borderWidth": 10,
@@ -98,7 +91,6 @@ exports[`<contexts.*> <ThemeProvider> number var value lookup with reference to
     }
   />,
   <ViewNativeComponent
-    ref={[Function]}
     style={
       {
         "borderWidth": 10,
@@ -113,7 +105,6 @@ exports[`<contexts.*> <ThemeProvider> number var value lookup with reference to
 exports[`<contexts.*> <ThemeProvider> rgb(a) function with args applied through a single var 1`] = `
 [
   <Text
-    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -124,7 +115,6 @@ exports[`<contexts.*> <ThemeProvider> rgb(a) function with args applied through
     }
   />,
   <Text
-    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -139,7 +129,6 @@ exports[`<contexts.*> <ThemeProvider> rgb(a) function with args applied through
 
 exports[`<contexts.*> <ThemeProvider> rgba function with args applied through multiple (& nested) vars 1`] = `
 <Text
-  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -153,7 +142,6 @@ exports[`<contexts.*> <ThemeProvider> rgba function with args applied through mu
 
 exports[`<contexts.*> <ThemeProvider> string var 1`] = `
 <Text
-  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -168,7 +156,6 @@ exports[`<contexts.*> <ThemeProvider> string var 1`] = `
 
 exports[`<contexts.*> <ThemeProvider> string var and falls back to a default value containing spaces and embedded var 1`] = `
 <Text
-  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -182,7 +169,6 @@ exports[`<contexts.*> <ThemeProvider> string var and falls back to a default val
 
 exports[`<contexts.*> <ThemeProvider> string var and falls back to default value containing a var 1`] = `
 <Text
-  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -196,7 +182,6 @@ exports[`<contexts.*> <ThemeProvider> string var and falls back to default value
 
 exports[`<contexts.*> <ThemeProvider> string var value lookup with em prop conversion 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
   style={
     {
       "borderWidth": 160,
@@ -209,7 +194,6 @@ exports[`<contexts.*> <ThemeProvider> string var value lookup with em prop conve
 
 exports[`<contexts.*> <ThemeProvider> string var value lookup with pixel prop conversion 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
   style={
     {
       "borderWidth": 10,
@@ -223,7 +207,6 @@ exports[`<contexts.*> <ThemeProvider> string var value lookup with pixel prop co
 exports[`<contexts.*> <ThemeProvider> string var with a default value 1`] = `
 [
   <Text
-    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -234,7 +217,6 @@ exports[`<contexts.*> <ThemeProvider> string var with a default value 1`] = `
     }
   />,
   <Text
-    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -250,7 +232,6 @@ exports[`<contexts.*> <ThemeProvider> string var with a default value 1`] = `
 exports[`<contexts.*> <ThemeProvider> string var with a default value containing spaces 1`] = `
 [
   <Text
-    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -261,7 +242,6 @@ exports[`<contexts.*> <ThemeProvider> string var with a default value containing
     }
   />,
   <Text
-    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -276,7 +256,6 @@ exports[`<contexts.*> <ThemeProvider> string var with a default value containing
 
 exports[`<contexts.*> <ThemeProvider> textShadow with nested/multiple vars 1`] = `
 <Text
-  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -295,7 +274,6 @@ exports[`<contexts.*> <ThemeProvider> textShadow with nested/multiple vars 1`] =
 
 exports[`<contexts.*> <ThemeProvider> transform with nested/multiple vars 1`] = `
 <Text
-  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",