[fix] Callback ref less on Views by making classList constant

Close #1766

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

@@ -127,6 +127,19 @@ describe('components/View', () => {
       expect(ref).toBeCalled();
     });
 
+    test('is not called for props changes', () => {
+      const ref = jest.fn();
+      let rerender;
+      act(() => {
+        ({ rerender } = render(<View ref={ref} testID="123" />));
+      });
+      expect(ref).toHaveBeenCalledTimes(1);
+      act(() => {
+        rerender(<View ref={ref} testID="1234" />);
+      });
+      expect(ref).toHaveBeenCalledTimes(1);
+    });
+
     test('node has imperative methods', () => {
       const ref = React.createRef();
       act(() => {

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

@@ -103,12 +103,6 @@ const View = forwardRef<ViewProps, *>((props, forwardedRef) => {
   const hasTextAncestor = useContext(TextAncestorContext);
   const hostRef = useRef(null);
 
-  const classList = [classes.view];
-  const style = StyleSheet.compose(
-    hasTextAncestor && styles.inline,
-    props.style
-  );
-
   useElementLayout(hostRef, onLayout);
   useResponderEvents(hostRef, {
     onMoveShouldSetResponder,
@@ -129,6 +123,11 @@ const View = forwardRef<ViewProps, *>((props, forwardedRef) => {
     onStartShouldSetResponderCapture
   });
 
+  const style = StyleSheet.compose(
+    hasTextAncestor && styles.inline,
+    props.style
+  );
+
   const supportedProps = pickProps(props);
   supportedProps.classList = classList;
   supportedProps.style = style;
@@ -161,6 +160,8 @@ const classes = css.create({
   }
 });
 
+const classList = [classes.view];
+
 const styles = StyleSheet.create({
   inline: {
     display: 'inline-flex'

packages/react-native-web/src/modules/useMergeRefs/__tests__/index-test.js

@@ -58,7 +58,7 @@ describe('modules/useMergeRefs', () => {
     expect(nextRef).toHaveBeenCalled();
   });
 
-  test.skip('ref is not called for each rerender', () => {
+  test('ref is not called for each rerender', () => {
     const ref = jest.fn();
     let rerender;
 
@@ -72,7 +72,7 @@ describe('modules/useMergeRefs', () => {
     expect(ref).toHaveBeenCalledTimes(1);
   });
 
-  test.skip('ref is not called for props changes', () => {
+  test('ref is not called for props changes', () => {
     const ref = jest.fn();
     let rerender;