Turn on string ref deprecation warning for everybody (codemoddable)

packages/react-dom/src/__tests__/ReactComponent-test.js

@@ -12,6 +12,7 @@
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactFeatureFlags;
 let ReactTestUtils;
 
 describe('ReactComponent', () => {
@@ -21,6 +22,7 @@ describe('ReactComponent', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMServer = require('react-dom/server');
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactTestUtils = require('react-dom/test-utils');
   });
 
@@ -36,7 +38,7 @@ describe('ReactComponent', () => {
     }).toThrowError(/Target container is not a DOM element./);
   });
 
-  it('should throw when supplying a ref outside of render method', () => {
+  it('should throw when supplying a string ref outside of render method', () => {
     let instance = <div ref="badDiv" />;
     expect(function() {
       instance = ReactTestUtils.renderIntoDocument(instance);
@@ -102,7 +104,7 @@ describe('ReactComponent', () => {
     }
   });
 
-  it('should support refs on owned components', () => {
+  it('should support string refs on owned components', () => {
     const innerObj = {};
     const outerObj = {};
 
@@ -133,10 +135,29 @@ describe('ReactComponent', () => {
       }
     }
 
-    ReactTestUtils.renderIntoDocument(<Component />);
+    expect(() => {
+      ReactTestUtils.renderIntoDocument(<Component />);
+    }).toErrorDev(
+      ReactFeatureFlags.warnAboutStringRefs
+        ? [
+            'Warning: Component "div" 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 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 **)',
+          ]
+        : [],
+    );
   });
 
-  it('should not have refs on unmounted components', () => {
+  it('should not have string refs on unmounted components', () => {
     class Parent extends React.Component {
       render() {
         return (

packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js

@@ -378,7 +378,14 @@ describe('ReactComponentLifeCycle', () => {
         }
         // you would *NEVER* do anything like this in real code!
         this.state.hasRenderCompleted = true;
-        return <div ref="theDiv">I am the inner DIV</div>;
+        return (
+          <div
+            ref={current => {
+              this.refs.theDiv = current;
+            }}>
+            I am the inner DIV
+          </div>
+        );
       }
 
       componentWillUnmount() {
@@ -477,7 +484,11 @@ describe('ReactComponentLifeCycle', () => {
     class Component extends React.Component {
       render() {
         return (
-          <Tooltip ref="tooltip" tooltip={<div>{this.props.tooltipText}</div>}>
+          <Tooltip
+            ref={current => {
+              this.refs.tooltip = current;
+            }}
+            tooltip={<div>{this.props.tooltipText}</div>}>
             {this.props.text}
           </Tooltip>
         );

packages/react-dom/src/__tests__/ReactCompositeComponent-test.js

@@ -79,9 +79,19 @@ describe('ReactCompositeComponent', () => {
       render() {
         const toggleActivatedState = this._toggleActivatedState;
         return !this.state.activated ? (
-          <a ref="x" onClick={toggleActivatedState} />
+          <a
+            ref={current => {
+              this.refs.x = current;
+            }}
+            onClick={toggleActivatedState}
+          />
         ) : (
-          <b ref="x" onClick={toggleActivatedState} />
+          <b
+            ref={current => {
+              this.refs.x = current;
+            }}
+            onClick={toggleActivatedState}
+          />
         );
       }
     };
@@ -98,7 +108,12 @@ describe('ReactCompositeComponent', () => {
       render() {
         const className = this.props.anchorClassOn ? 'anchorClass' : '';
         return this.props.renderAnchor ? (
-          <a ref="anch" className={className} />
+          <a
+            ref={current => {
+              this.refs.anch = current;
+            }}
+            className={className}
+          />
         ) : (
           <b />
         );
@@ -741,8 +756,15 @@ describe('ReactCompositeComponent', () => {
     class Wrapper extends React.Component {
       render() {
         return (
-          <Parent ref="parent">
-            <Child ref="child" />
+          <Parent
+            ref={current => {
+              this.refs.parent = current;
+            }}>
+            <Child
+              ref={current => {
+                this.refs.child = current;
+              }}
+            />
           </Parent>
         );
       }
@@ -1146,21 +1168,37 @@ describe('ReactCompositeComponent', () => {
         if (this.props.flipped) {
           return (
             <div>
-              <Static ref="static0" key="B">
+              <Static
+                ref={current => {
+                  this.refs.static0 = current;
+                }}
+                key="B">
                 B (ignored)
               </Static>
-              <Static ref="static1" key="A">
+              <Static
+                ref={current => {
+                  this.refs.static1 = current;
+                }}
+                key="A">
                 A (ignored)
               </Static>
             </div>
           );
         } else {
           return (
             <div>
-              <Static ref="static0" key="A">
+              <Static
+                ref={current => {
+                  this.refs.static0 = current;
+                }}
+                key="A">
                 A
               </Static>
-              <Static ref="static1" key="B">
+              <Static
+                ref={current => {
+                  this.refs.static1 = current;
+                }}
+                key="B">
                 B
               </Static>
             </div>
@@ -1456,7 +1494,14 @@ describe('ReactCompositeComponent', () => {
       }
 
       render() {
-        return <Apple color={this.state.color} ref="apple" />;
+        return (
+          <Apple
+            color={this.state.color}
+            ref={current => {
+              this.refs.apple = current;
+            }}
+          />
+        );
       }
     }
 

packages/react-dom/src/__tests__/ReactDOMEventListener-test.js

@@ -198,7 +198,14 @@ describe('ReactDOMEventListener', () => {
       };
 
       render() {
-        const inner = <div ref="inner">Inner</div>;
+        const inner = (
+          <div
+            ref={current => {
+              this.refs.inner = current;
+            }}>
+            Inner
+          </div>
+        );
         return (
           <div>
             <div onMouseOut={onMouseOut} id="outer">

packages/react-dom/src/__tests__/ReactDOMInput-test.js

@@ -1075,18 +1075,29 @@ describe('ReactDOMInput', () => {
         return (
           <div>
             <input
-              ref="a"
+              ref={current => {
+                this.refs.a = current;
+              }}
               type="radio"
               name="fruit"
               checked={true}
               onChange={emptyFunction}
             />
             A
-            <input ref="b" type="radio" name="fruit" onChange={emptyFunction} />
+            <input
+              ref={current => {
+                this.refs.b = current;
+              }}
+              type="radio"
+              name="fruit"
+              onChange={emptyFunction}
+            />
             B
             <form>
               <input
-                ref="c"
+                ref={current => {
+                  this.refs.c = current;
+                }}
                 type="radio"
                 name="fruit"
                 defaultChecked={true}

packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js

@@ -337,7 +337,13 @@ describe('ReactDOMServerIntegration', () => {
       itRenders('no ref attribute', async render => {
         class RefComponent extends React.Component {
           render() {
-            return <div ref="foo" />;
+            return (
+              <div
+                ref={current => {
+                  this.refs.foo = current;
+                }}
+              />
+            );
           }
         }
         const e = await render(<RefComponent />);

packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js

@@ -14,6 +14,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactFeatureFlags;
 let ReactTestUtils;
 
 function initModules() {
@@ -22,6 +23,7 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
   ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
@@ -91,10 +93,22 @@ describe('ReactDOMServerIntegration', () => {
       root.innerHTML = markup;
       let component = null;
       resetModules();
-      await asyncReactDOMRender(
-        <RefsComponent ref={e => (component = e)} />,
-        root,
-        true,
+      await expect(async () => {
+        await asyncReactDOMRender(
+          <RefsComponent ref={e => (component = e)} />,
+          root,
+          true,
+        );
+      }).toErrorDev(
+        ReactFeatureFlags.warnAboutStringRefs
+          ? [
+              'Warning: Component "RefsComponent" contains the string ref "myDiv". ' +
+                '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 RefsComponent (at **)',
+            ]
+          : [],
       );
       expect(component.refs.myDiv).toBe(root.firstChild);
     });

packages/react-dom/src/__tests__/ReactIdentity-test.js

@@ -70,7 +70,12 @@ describe('ReactIdentity', () => {
       render() {
         return (
           <div>
-            <span ref="span" key={key} />
+            <span
+              ref={current => {
+                this.refs.span = current;
+              }}
+              key={key}
+            />
           </div>
         );
       }

packages/react-dom/src/__tests__/ReactMultiChildReconcile-test.js

@@ -116,7 +116,9 @@ class FriendsStatusDisplay extends React.Component {
         !status ? null : (
           <StatusDisplay
             key={key}
-            ref={key}
+            ref={current => {
+              this.refs[key] = current;
+            }}
             contentKey={key}
             onFlush={this.verifyPreviousRefsResolved.bind(this, key)}
             status={status}

packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js

@@ -46,7 +46,11 @@ describe('ReactDOMServerHydration', () => {
 
       render() {
         return (
-          <span ref="span" onClick={this.click}>
+          <span
+            ref={current => {
+              this.refs.span = current;
+            }}
+            onClick={this.click}>
             Name: {this.props.name}
           </span>
         );

packages/react-dom/src/__tests__/ReactTestUtils-test.js

@@ -224,11 +224,22 @@ describe('ReactTestUtils', () => {
     class Root extends React.Component {
       render() {
         return (
-          <html ref="html">
-            <head ref="head">
+          <html
+            ref={current => {
+              this.refs.html = current;
+            }}>
+            <head
+              ref={current => {
+                this.refs.head = current;
+              }}>
               <title>hello</title>
             </head>
-            <body ref="body">hello, world</body>
+            <body
+              ref={current => {
+                this.refs.body = current;
+              }}>
+              hello, world
+            </body>
           </html>
         );
       }
@@ -354,7 +365,9 @@ describe('ReactTestUtils', () => {
             <div>
               <input
                 type="text"
-                ref="input"
+                ref={current => {
+                  this.refs.input = current;
+                }}
                 onChange={this.props.handleChange}
               />
             </div>