fix: Prevent ref function from being being called more frequently than needed

packages/react-native-web/src/exports/Picker/__tests__/index-test.js

@@ -83,5 +83,36 @@ describe('components/Picker', () => {
       const { container } = render(picker);
       expect(findSelect(container).value).toBe('22');
     });
+
+    test('ref function is called when ref changes', () => {
+      const refMock = jest.fn();
+      const otherRefMock = jest.fn();
+
+      const { rerender } = render(<Picker ref={refMock} />);
+      expect(refMock).toHaveBeenCalled();
+
+      rerender(<Picker ref={otherRefMock} />)
+      expect(otherRefMock).toHaveBeenCalled();
+    });
+
+    test('ref function is not called every render', () => {
+      const refMock = jest.fn();
+
+      const { rerender } = render(<Picker ref={refMock} />);
+      expect(refMock).toHaveBeenCalledTimes(1);
+
+      rerender(<Picker ref={refMock} />);
+      expect(refMock).toHaveBeenCalledTimes(1);
+    });
+
+    test('ref function is not called on prop changes', () => {
+      const refMock = jest.fn();
+
+      const { rerender } = render(<Picker ref={refMock} testID={'foo'} />);
+      expect(refMock).toHaveBeenCalledTimes(1);
+
+      rerender(<Picker ref={refMock} testID={'bar'} />);
+      expect(refMock).toHaveBeenCalledTimes(1);
+    });
   });
 });

packages/react-native-web/src/exports/Picker/index.js

@@ -15,7 +15,7 @@ import setAndForwardRef from '../../modules/setAndForwardRef';
 import usePlatformMethods from '../../hooks/usePlatformMethods';
 import PickerItem from './PickerItem';
 import StyleSheet, { type StyleObj } from '../StyleSheet';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useMemo, useRef } from 'react';
 
 type PickerProps = {
   ...ViewProps,
@@ -47,12 +47,15 @@ const Picker = forwardRef<PickerProps, *>((props, forwardedRef) => {
   } = props;
 
   const hostRef = useRef(null);
-  const setRef = setAndForwardRef({
-    getForwardedRef: () => forwardedRef,
-    setLocalRef: hostNode => {
-      hostRef.current = hostNode;
-    }
-  });
+  const setRef = useMemo(
+    () => setAndForwardRef({
+      getForwardedRef: () => forwardedRef,
+      setLocalRef: hostNode => {
+        hostRef.current = hostNode;
+      },
+    }),
+    [forwardedRef]
+  );
 
   function handleChange(e: Object) {
     const { selectedIndex, value } = e.target;

packages/react-native-web/src/exports/Pressable/__tests__/index-test.js

@@ -0,0 +1,39 @@
+/* eslint-env jasmine, jest */
+/* eslint-disable react/jsx-no-bind */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import TouchableOpacity from '../';
+
+describe('components/Pressable', () => {
+  test('ref function is called when ref changes', () => {
+    const refMock = jest.fn();
+    const otherRefMock = jest.fn();
+
+    const { rerender } = render(<TouchableOpacity ref={refMock} />);
+    expect(refMock).toHaveBeenCalled();
+
+    rerender(<TouchableOpacity ref={otherRefMock} />)
+    expect(otherRefMock).toHaveBeenCalled();
+  });
+
+  test('ref function is not called every render', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TouchableOpacity ref={refMock} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TouchableOpacity ref={refMock} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+
+  test('ref function is not called on prop changes', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TouchableOpacity ref={refMock} testID={'foo'} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TouchableOpacity ref={refMock} testID={'bar'} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+});

packages/react-native-web/src/exports/Pressable/index.js

@@ -97,12 +97,15 @@ function Pressable(props: Props, forwardedRef): React.Node {
   const [pressed, setPressed] = useForceableState(testOnly_pressed === true);
 
   const hostRef = useRef(null);
-  const setRef = setAndForwardRef({
-    getForwardedRef: () => forwardedRef,
-    setLocalRef: hostNode => {
-      hostRef.current = hostNode;
-    }
-  });
+  const setRef = useMemo(
+    () => setAndForwardRef({
+      getForwardedRef: () => forwardedRef,
+      setLocalRef: hostNode => {
+        hostRef.current = hostNode;
+      }
+    }),
+    [forwardedRef]
+  );
 
   const pressConfig = useMemo(
     () => ({

packages/react-native-web/src/exports/Text/__tests__/index-test.js

@@ -22,4 +22,35 @@ describe('components/Text', () => {
   });
 
   test('prop "numberOfLines"', () => {});
+
+  test('ref function is called when ref changes', () => {
+    const refMock = jest.fn();
+    const otherRefMock = jest.fn();
+
+    const { rerender } = render(<Text ref={refMock} />);
+    expect(refMock).toHaveBeenCalled();
+
+    rerender(<Text ref={otherRefMock} />)
+    expect(otherRefMock).toHaveBeenCalled();
+  });
+
+  test('ref function is not called every render', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<Text ref={refMock} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<Text ref={refMock} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+
+  test('ref function is not called on prop changes', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<Text ref={refMock} testID={'foo'} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<Text ref={refMock} testID={'bar'} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
 });

packages/react-native-web/src/exports/Text/index.js

@@ -11,7 +11,7 @@
 import type { TextProps } from './types';
 
 import * as React from 'react';
-import { forwardRef, useContext, useRef } from 'react';
+import { forwardRef, useContext, useMemo, useRef } from 'react';
 import createElement from '../createElement';
 import css from '../StyleSheet/css';
 import pick from '../../modules/pick';
@@ -100,12 +100,15 @@ const Text = forwardRef<TextProps, *>((props, forwardedRef) => {
 
   const hasTextAncestor = useContext(TextAncestorContext);
   const hostRef = useRef(null);
-  const setRef = setAndForwardRef({
-    getForwardedRef: () => forwardedRef,
-    setLocalRef: hostNode => {
-      hostRef.current = hostNode;
-    }
-  });
+  const setRef = useMemo(
+    () => setAndForwardRef({
+      getForwardedRef: () => forwardedRef,
+      setLocalRef: hostNode => {
+        hostRef.current = hostNode;
+      }
+    }),
+    [forwardedRef]
+  );
 
   const classList = [
     classes.text,

packages/react-native-web/src/exports/TextInput/__tests__/index-test.js

@@ -633,4 +633,35 @@ describe('components/TextInput', () => {
     const input = findInput(container);
     expect(input.value).toEqual(value);
   });
+
+  test('ref function is called when ref changes', () => {
+    const refMock = jest.fn();
+    const otherRefMock = jest.fn();
+
+    const { rerender } = render(<TextInput ref={refMock} />);
+    expect(refMock).toHaveBeenCalled();
+
+    rerender(<TextInput ref={otherRefMock} />)
+    expect(otherRefMock).toHaveBeenCalled();
+  });
+
+  test('ref function is not called every render', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TextInput ref={refMock} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TextInput ref={refMock} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+
+  test('ref function is not called on prop changes', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TextInput ref={refMock} testID={'foo'} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TextInput ref={refMock} testID={'bar'} />);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
 });

packages/react-native-web/src/exports/TextInput/index.js

@@ -10,7 +10,7 @@
 
 import type { TextInputProps } from './types';
 
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useCallback, useMemo, useRef } from 'react';
 import createElement from '../createElement';
 import css from '../StyleSheet/css';
 import pick from '../../modules/pick';
@@ -188,28 +188,55 @@ const TextInput = forwardRef<TextInputProps, *>((props, forwardedRef) => {
 
   const hostRef = useRef(null);
   const dimensions = useRef({ height: null, width: null });
-  const setRef = setAndForwardRef({
-    getForwardedRef: () => forwardedRef,
-    setLocalRef: hostNode => {
-      // TextInput needs to add more methods to the hostNode in addition to those
-      // added by `usePlatformMethods`. This is temporarily until an API like
-      // `TextInput.clear(hostRef)` is added to React Native.
-      if (hostNode != null) {
-        hostNode.clear = function() {
-          if (hostNode != null) {
-            hostNode.value = '';
-          }
-        };
-        hostNode.isFocused = function() {
-          return hostNode != null && TextInputState.currentlyFocusedField() === hostNode;
-        };
+
+  const handleContentSizeChange = useCallback(
+    () => {
+      const node = hostRef.current;
+      if (multiline && onContentSizeChange && node != null) {
+        const newHeight = node.scrollHeight;
+        const newWidth = node.scrollWidth;
+        if (newHeight !== dimensions.current.height || newWidth !== dimensions.current.width) {
+          dimensions.current.height = newHeight;
+          dimensions.current.width = newWidth;
+          onContentSizeChange({
+            nativeEvent: {
+              contentSize: {
+                height: dimensions.current.height,
+                width: dimensions.current.width
+              }
+            }
+          });
+        }
       }
-      hostRef.current = hostNode;
-      if (hostRef.current != null) {
-        handleContentSizeChange();
+    },
+    [multiline, onContentSizeChange]
+  );
+
+  const setRef = useMemo(
+    () => setAndForwardRef({
+      getForwardedRef: () => forwardedRef,
+      setLocalRef: hostNode => {
+        // TextInput needs to add more methods to the hostNode in addition to those
+        // added by `usePlatformMethods`. This is temporarily until an API like
+        // `TextInput.clear(hostRef)` is added to React Native.
+        if (hostNode != null) {
+          hostNode.clear = function() {
+            if (hostNode != null) {
+              hostNode.value = '';
+            }
+          };
+          hostNode.isFocused = function() {
+            return hostNode != null && TextInputState.currentlyFocusedField() === hostNode;
+          };
+        }
+        hostRef.current = hostNode;
+        if (hostRef.current != null) {
+          handleContentSizeChange();
+        }
       }
-    }
-  });
+    }),
+    [forwardedRef, handleContentSizeChange]
+  );
 
   function handleBlur(e) {
     TextInputState._currentlyFocusedNode = null;
@@ -219,26 +246,6 @@ const TextInput = forwardRef<TextInputProps, *>((props, forwardedRef) => {
     }
   }
 
-  function handleContentSizeChange() {
-    const node = hostRef.current;
-    if (multiline && onContentSizeChange && node != null) {
-      const newHeight = node.scrollHeight;
-      const newWidth = node.scrollWidth;
-      if (newHeight !== dimensions.current.height || newWidth !== dimensions.current.width) {
-        dimensions.current.height = newHeight;
-        dimensions.current.width = newWidth;
-        onContentSizeChange({
-          nativeEvent: {
-            contentSize: {
-              height: dimensions.current.height,
-              width: dimensions.current.width
-            }
-          }
-        });
-      }
-    }
-  }
-
   function handleChange(e) {
     const text = e.target.value;
     e.nativeEvent.text = text;

packages/react-native-web/src/exports/TouchableHighlight/__tests__/index-test.js

@@ -0,0 +1,40 @@
+/* eslint-env jasmine, jest */
+/* eslint-disable react/jsx-no-bind */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import TouchableHighlight from '../';
+import View from '../../View';
+
+describe('components/TouchableHighlight', () => {
+  test('ref function is called when ref changes', () => {
+    const refMock = jest.fn();
+    const otherRefMock = jest.fn();
+
+    const { rerender } = render(<TouchableHighlight ref={refMock}><View /></TouchableHighlight>);
+    expect(refMock).toHaveBeenCalled();
+
+    rerender(<TouchableHighlight ref={otherRefMock}><View /></TouchableHighlight>)
+    expect(otherRefMock).toHaveBeenCalled();
+  });
+
+  test('ref function is not called every render', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TouchableHighlight ref={refMock}><View /></TouchableHighlight>);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TouchableHighlight ref={refMock}><View /></TouchableHighlight>);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+
+  test('ref function is not called on prop changes', () => {
+    const refMock = jest.fn();
+
+    const { rerender } = render(<TouchableHighlight ref={refMock} testID={'foo'}><View /></TouchableHighlight>);
+    expect(refMock).toHaveBeenCalledTimes(1);
+
+    rerender(<TouchableHighlight ref={refMock} testID={'bar'}><View /></TouchableHighlight>);
+    expect(refMock).toHaveBeenCalledTimes(1);
+  });
+});