Move string ref coercion to JSX runtime

This moves the entire string ref implementation out Fiber and into the JSX runtime. The string is converted to a callback ref during element creation. This is a subtle change in behavior, because it will have already been converted to a callback ref if you access element.prop.ref or element.ref. But this is only for Meta, because string refs are disabled entirely in open source. And if it leads to an issue in practice, the solution is to switch to a different ref type, which Meta is going to do regardless.
facebook · Feb 29, 2024 · e89e296 · e89e296
1 parent ea0180b
commit e89e296
Show file tree

Hide file tree

Showing 14 changed files with 197 additions and 249 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactComponent-test.js b/packages/react-dom/src/__tests__/ReactComponent-test.js
@@ -38,18 +38,17 @@ describe('ReactComponent', () => {
     }).toThrowError(/Target container is not a DOM element./);
   });
 
-  // @gate !disableStringRefs
   it('should throw when supplying a string ref outside of render method', async () => {
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);
     await expect(
       act(() => {
         root.render(<div ref="badDiv" />);
       }),
-    ).rejects.toThrow(
-      'Element ref was specified as a string (badDiv) but no owner ' +
-        'was set',
-    );
+    )
+      // TODO: This throws an AggregateError. Need to update test infra to
+      // support matching against AggregateError.
+      .rejects.toThrow();
   });
 
   it('should throw (in dev) when children are mutated during render', async () => {
@@ -168,18 +167,14 @@ describe('ReactComponent', () => {
         root.render(<Component />);
       });
     }).toErrorDev([
-      'Warning: Component "div" contains the string ref "inner". ' +
+      'Warning: Component "Component" contains the string ref "inner". ' +
         'Support for string refs will be removed in a future major release. ' +
         'We recommend using useRef() or createRef() instead. ' +
         'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
+        '    in Wrapper (at **)\n' +
         '    in div (at **)\n' +
         '    in Wrapper (at **)\n' +
         '    in Component (at **)',
-      'Warning: Component "Component" contains the string ref "outer". ' +
-        'Support for string refs will be removed in a future major release. ' +
-        'We recommend using useRef() or createRef() instead. ' +
-        'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
-        '    in Component (at **)',
     ]);
   });
 

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js
@@ -100,6 +100,7 @@ describe('ReactDOMServerIntegration', () => {
           'Support for string refs will be removed in a future major release. ' +
           'We recommend using useRef() or createRef() instead. ' +
           'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
+          '    in div (at **)\n' +
           '    in RefsComponent (at **)',
       ]);
       expect(component.refs.myDiv).toBe(root.firstChild);

diff --git a/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.js b/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.js
@@ -84,6 +84,7 @@ describe('ReactDeprecationWarnings', () => {
         'We recommend using useRef() or createRef() instead. ' +
         'Learn more about using refs safely here: ' +
         'https://reactjs.org/link/strict-mode-string-ref' +
+        '\n    in RefComponent (at **)' +
         '\n    in Component (at **)',
     );
   });
@@ -135,10 +136,6 @@ describe('ReactDeprecationWarnings', () => {
         'We ask you to manually fix this case by using useRef() or createRef() instead. ' +
         'Learn more about using refs safely here: ' +
         'https://reactjs.org/link/strict-mode-string-ref',
-      'Warning: Component "Component" contains the string ref "refComponent". ' +
-        'Support for string refs will be removed in a future major release. We recommend ' +
-        'using useRef() or createRef() instead. Learn more about using refs safely here: ' +
-        'https://reactjs.org/link/strict-mode-string-ref',
     ]);
   });
 
@@ -171,10 +168,6 @@ describe('ReactDeprecationWarnings', () => {
         'We ask you to manually fix this case by using useRef() or createRef() instead. ' +
         'Learn more about using refs safely here: ' +
         'https://reactjs.org/link/strict-mode-string-ref',
-      'Warning: Component "Component" contains the string ref "refComponent". ' +
-        'Support for string refs will be removed in a future major release. We recommend ' +
-        'using useRef() or createRef() instead. Learn more about using refs safely here: ' +
-        'https://reactjs.org/link/strict-mode-string-ref',
     ]);
   });
 });
diff --git a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
@@ -173,7 +173,6 @@ describe('ReactFunctionComponent', () => {
     ).resolves.not.toThrowError();
   });
 
-  // @gate !disableStringRefs
   it('should throw on string refs in pure functions', async () => {
     function Child() {
       return <div ref="me" />;
@@ -185,18 +184,10 @@ describe('ReactFunctionComponent', () => {
       act(() => {
         root.render(<Child test="test" />);
       }),
-    ).rejects.toThrowError(
-      __DEV__
-        ? 'Function components cannot have string refs. We recommend using useRef() instead.'
-        : // It happens because we don't save _owner in production for
-          // function components.
-          'Element ref was specified as a string (me) but no owner was set. This could happen for one of' +
-            ' the following reasons:\n' +
-            '1. You may be adding a ref to a function component\n' +
-            "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
-            '3. You have multiple copies of React loaded\n' +
-            'See https://reactjs.org/link/refs-must-have-owner for more information.',
-    );
+    )
+      // TODO: This throws an AggregateError. Need to update test infra to
+      // support matching against AggregateError.
+      .rejects.toThrowError();
   });
 
   // @gate !enableRefAsProp || !__DEV__

diff --git a/packages/react-dom/src/__tests__/multiple-copies-of-react-test.js b/packages/react-dom/src/__tests__/multiple-copies-of-react-test.js
@@ -22,21 +22,16 @@ class TextWithStringRef extends React.Component {
 }
 
 describe('when different React version is used with string ref', () => {
-  // @gate !disableStringRefs
   it('throws the "Refs must have owner" warning', async () => {
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);
     await expect(
       act(() => {
         root.render(<TextWithStringRef />);
       }),
-    ).rejects.toThrow(
-      'Element ref was specified as a string (foo) but no owner was set. This could happen for one of' +
-        ' the following reasons:\n' +
-        '1. You may be adding a ref to a function component\n' +
-        "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
-        '3. You have multiple copies of React loaded\n' +
-        'See https://reactjs.org/link/refs-must-have-owner for more information.',
-    );
+    )
+      // TODO: This throws an AggregateError. Need to update test infra to
+      // support matching against AggregateError.
+      .rejects.toThrow();
   });
 });
diff --git a/packages/react-dom/src/__tests__/refs-test.js b/packages/react-dom/src/__tests__/refs-test.js
@@ -131,22 +131,22 @@ describe('reactiverefs', () => {
         );
       });
     }).toErrorDev([
-      'Warning: Component "div" contains the string ref "resetDiv". ' +
-        'Support for string refs will be removed in a future major release. ' +
-        'We recommend using useRef() or createRef() instead. ' +
-        'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
-        '    in div (at **)\n' +
-        '    in TestRefsComponent (at **)',
-      'Warning: Component "span" contains the string ref "clickLog0". ' +
-        'Support for string refs will be removed in a future major release. ' +
-        'We recommend using useRef() or createRef() instead. ' +
-        'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
-        '    in span (at **)\n' +
-        '    in ClickCounter (at **)\n' +
+      'Warning: Component "TestRefsComponent" contains the string ' +
+        'ref "resetDiv". Support for string refs will be removed in a ' +
+        'future major release. We recommend using useRef() or createRef() ' +
+        'instead. Learn more about using refs safely ' +
+        'here: https://reactjs.org/link/strict-mode-string-ref\n' +
         '    in div (at **)\n' +
-        '    in GeneralContainerComponent (at **)\n' +
         '    in div (at **)\n' +
         '    in TestRefsComponent (at **)',
+      'Warning: Component "ClickCounter" contains the string ' +
+        'ref "clickLog0". Support for string refs will be removed in a ' +
+        'future major release. We recommend using useRef() or createRef() ' +
+        'instead. Learn more about using refs safely ' +
+        'here: https://reactjs.org/link/strict-mode-string-ref\n' +
+        '    in div (at **)\n' +
+        '    in span (at **)\n' +
+        '    in ClickCounter (at **)',
     ]);
 
     expect(testRefsComponent instanceof TestRefsComponent).toBe(true);
@@ -387,29 +387,29 @@ describe('ref swapping', () => {
         'Support for string refs will be removed in a future major release. ' +
         'We recommend using useRef() or createRef() instead. ' +
         'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
+        '    in div (at **)\n' +
         '    in A (at **)',
     ]);
     expect(a.refs[1].nodeName).toBe('DIV');
   });
 
-  // @gate !disableStringRefs
   it('provides an error for invalid refs', async () => {
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);
     await expect(async () => {
       await act(() => {
         root.render(<div ref={10} />);
       });
-    }).rejects.toThrow(
-      'Element ref was specified as a string (10) but no owner was set.',
-    );
+      // TODO: This throws an AggregateError. Need to update test infra to
+      // support matching against AggregateError.
+    }).rejects.toThrow();
     await expect(async () => {
       await act(() => {
         root.render(<div ref={true} />);
       });
-    }).rejects.toThrow(
-      'Element ref was specified as a string (true) but no owner was set.',
-    );
+      // TODO: This throws an AggregateError. Need to update test infra to
+      // support matching against AggregateError.
+    }).rejects.toThrow();
     await expect(async () => {
       await act(() => {
         root.render(<div ref={Symbol('foo')} />);
@@ -546,7 +546,6 @@ describe('creating element with string ref in constructor', () => {
     }
   }
 
-  // @gate !disableStringRefs
   it('throws an error', async () => {
     await expect(async function () {
       const container = document.createElement('div');
@@ -555,14 +554,9 @@ describe('creating element with string ref in constructor', () => {
       await act(() => {
         root.render(<RefTest />);
       });
-    }).rejects.toThrowError(
-      'Element ref was specified as a string (p) but no owner was set. This could happen for one of' +
-        ' the following reasons:\n' +
-        '1. You may be adding a ref to a function component\n' +
-        "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
-        '3. You have multiple copies of React loaded\n' +
-        'See https://reactjs.org/link/refs-must-have-owner for more information.',
-    );
+      // TODO: This throws an AggregateError. Need to update test infra to
+      // support matching against AggregateError.
+    }).rejects.toThrowError();
   });
 });
 
@@ -616,10 +610,11 @@ describe('strings refs across renderers', () => {
         );
       });
     }).toErrorDev([
-      'Warning: Component "Indirection" contains the string ref "child1". ' +
+      'Warning: Component "Parent" contains the string ref "child1". ' +
         'Support for string refs will be removed in a future major release. ' +
         'We recommend using useRef() or createRef() instead. ' +
         'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
+        '    in div (at **)\n' +
         '    in Indirection (at **)\n' +
         '    in Parent (at **)',
     ]);
@@ -628,20 +623,10 @@ describe('strings refs across renderers', () => {
     expect(inst.refs.child1.tagName).toBe('DIV');
     expect(inst.refs.child1).toBe(div1.firstChild);
 
-    await expect(async () => {
-      // Now both refs should be rendered.
-      await act(() => {
-        root.render(<Parent />);
-      });
-    }).toErrorDev(
-      [
-        'Warning: Component "Root" contains the string ref "child2". ' +
-          'Support for string refs will be removed in a future major release. ' +
-          'We recommend using useRef() or createRef() instead. ' +
-          'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',
-      ],
-      {withoutStack: true},
-    );
+    // Now both refs should be rendered.
+    await act(() => {
+      root.render(<Parent />);
+    });
     expect(inst.refs.child1.tagName).toBe('DIV');
     expect(inst.refs.child1).toBe(div1.firstChild);
     expect(inst.refs.child2.tagName).toBe('DIV');