maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[cleanup] remove feature flags warnAboutDefaultPropsOnFunctionComponents and warnAboutStringRefs (#25980) 

These feature flags are fully rolled out and easy to clean up. Let's
remove them!
This commit is contained in:
Jan Kassens 2023-01-11 12:19:46 -05:00 committed by GitHub
parent 7002a6743e
commit 0fce6bb498
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 111 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/react-dom/src/__tests__/ReactComponent-test.js vendored
View File

@ -12,7 +12,6 @@
let React; let React;
let ReactDOM; let ReactDOM;
let ReactDOMServer; let ReactDOMServer;
let ReactFeatureFlags;
let ReactTestUtils; let ReactTestUtils;
describe('ReactComponent', () => { describe('ReactComponent', () => {
@ -22,7 +21,6 @@ describe('ReactComponent', () => {
React = require('react'); React = require('react');
ReactDOM = require('react-dom'); ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server'); ReactDOMServer = require('react-dom/server');
ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactTestUtils = require('react-dom/test-utils'); ReactTestUtils = require('react-dom/test-utils');
}); });
@ -137,24 +135,20 @@ describe('ReactComponent', () => {
expect(() => { expect(() => {
ReactTestUtils.renderIntoDocument(<Component />); ReactTestUtils.renderIntoDocument(<Component />);
}).toErrorDev( }).toErrorDev([
ReactFeatureFlags.warnAboutStringRefs 'Warning: Component "div" contains the string ref "inner". ' +
? [ 'Support for string refs will be removed in a future major release. ' +
'Warning: Component "div" contains the string ref "inner". ' + 'We recommend using useRef() or createRef() instead. ' +
'Support for string refs will be removed in a future major release. ' + 'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
'We recommend using useRef() or createRef() instead. ' + ' in div (at **)\n' +
'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 Component (at **)',
' in Wrapper (at **)\n' + 'Warning: Component "Component" contains the string ref "outer". ' +
' in Component (at **)', 'Support for string refs will be removed in a future major release. ' +
'Warning: Component "Component" contains the string ref "outer". ' + 'We recommend using useRef() or createRef() instead. ' +
'Support for string refs will be removed in a future major release. ' + 'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
'We recommend using useRef() or createRef() instead. ' + ' in Component (at **)',
'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' + ]);
' in Component (at **)',
]
: [],
);
}); });
it('should not have string refs on unmounted components', () => { it('should not have string refs on unmounted components', () => {

20
packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js vendored
View File

@ -14,7 +14,6 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
let React; let React;
let ReactDOM; let ReactDOM;
let ReactDOMServer; let ReactDOMServer;
let ReactFeatureFlags;
let ReactTestUtils; let ReactTestUtils;
function initModules() { function initModules() {
@ -23,7 +22,6 @@ function initModules() {
React = require('react'); React = require('react');
ReactDOM = require('react-dom'); ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server'); ReactDOMServer = require('react-dom/server');
ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactTestUtils = require('react-dom/test-utils'); ReactTestUtils = require('react-dom/test-utils');
// Make them available to the helpers. // Make them available to the helpers.
@ -99,17 +97,13 @@ describe('ReactDOMServerIntegration', () => {
root, root,
true, true,
); );
}).toErrorDev( }).toErrorDev([
ReactFeatureFlags.warnAboutStringRefs 'Warning: Component "RefsComponent" contains the string ref "myDiv". ' +
? [ 'Support for string refs will be removed in a future major release. ' +
'Warning: Component "RefsComponent" contains the string ref "myDiv". ' + 'We recommend using useRef() or createRef() instead. ' +
'Support for string refs will be removed in a future major release. ' + 'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
'We recommend using useRef() or createRef() instead. ' + ' in RefsComponent (at **)',
'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); expect(component.refs.myDiv).toBe(root.firstChild);
}); });
}); });

92
packages/react-dom/src/__tests__/refs-test.js vendored
View File

@ -123,28 +123,24 @@ describe('reactiverefs', () => {
let testRefsComponent; let testRefsComponent;
expect(() => { expect(() => {
testRefsComponent = ReactDOM.render(<TestRefsComponent />, container); testRefsComponent = ReactDOM.render(<TestRefsComponent />, container);
}).toErrorDev( }).toErrorDev([
ReactFeatureFlags.warnAboutStringRefs 'Warning: Component "div" contains the string ref "resetDiv". ' +
? [ 'Support for string refs will be removed in a future major release. ' +
'Warning: Component "div" contains the string ref "resetDiv". ' + 'We recommend using useRef() or createRef() instead. ' +
'Support for string refs will be removed in a future major release. ' + 'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
'We recommend using useRef() or createRef() instead. ' + ' in div (at **)\n' +
'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' + ' in TestRefsComponent (at **)',
' in div (at **)\n' + 'Warning: Component "span" contains the string ref "clickLog0". ' +
' in TestRefsComponent (at **)', 'Support for string refs will be removed in a future major release. ' +
'Warning: Component "span" contains the string ref "clickLog0". ' + 'We recommend using useRef() or createRef() instead. ' +
'Support for string refs will be removed in a future major release. ' + 'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
'We recommend using useRef() or createRef() instead. ' + ' in span (at **)\n' +
'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' + ' in ClickCounter (at **)\n' +
' in span (at **)\n' + ' in div (at **)\n' +
' in ClickCounter (at **)\n' + ' in GeneralContainerComponent (at **)\n' +
' in div (at **)\n' + ' in div (at **)\n' +
' in GeneralContainerComponent (at **)\n' + ' in TestRefsComponent (at **)',
' in div (at **)\n' + ]);
' in TestRefsComponent (at **)',
]
: [],
);
expect(testRefsComponent instanceof TestRefsComponent).toBe(true); expect(testRefsComponent instanceof TestRefsComponent).toBe(true);
@ -349,17 +345,13 @@ describe('ref swapping', () => {
let a; let a;
expect(() => { expect(() => {
a = ReactTestUtils.renderIntoDocument(<A />); a = ReactTestUtils.renderIntoDocument(<A />);
}).toErrorDev( }).toErrorDev([
ReactFeatureFlags.warnAboutStringRefs 'Warning: Component "A" contains the string ref "1". ' +
? [ 'Support for string refs will be removed in a future major release. ' +
'Warning: Component "A" contains the string ref "1". ' + 'We recommend using useRef() or createRef() instead. ' +
'Support for string refs will be removed in a future major release. ' + 'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
'We recommend using useRef() or createRef() instead. ' + ' in A (at **)',
'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' + ]);
' in A (at **)',
]
: [],
);
expect(a.refs[1].nodeName).toBe('DIV'); expect(a.refs[1].nodeName).toBe('DIV');
}); });
@ -546,18 +538,14 @@ describe('strings refs across renderers', () => {
let inst; let inst;
expect(() => { expect(() => {
inst = ReactDOM.render(<Parent />, div1); inst = ReactDOM.render(<Parent />, div1);
}).toErrorDev( }).toErrorDev([
ReactFeatureFlags.warnAboutStringRefs 'Warning: Component "Indirection" contains the string ref "child1". ' +
? [ 'Support for string refs will be removed in a future major release. ' +
'Warning: Component "Indirection" contains the string ref "child1". ' + 'We recommend using useRef() or createRef() instead. ' +
'Support for string refs will be removed in a future major release. ' + 'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
'We recommend using useRef() or createRef() instead. ' + ' in Indirection (at **)\n' +
'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' + ' in Parent (at **)',
' in Indirection (at **)\n' + ]);
' in Parent (at **)',
]
: [],
);
// Only the first ref has rendered yet. // Only the first ref has rendered yet.
expect(inst.refs.child1.tagName).toBe('DIV'); expect(inst.refs.child1.tagName).toBe('DIV');
@ -567,14 +555,12 @@ describe('strings refs across renderers', () => {
// Now both refs should be rendered. // Now both refs should be rendered.
ReactDOM.render(<Parent />, div1); ReactDOM.render(<Parent />, div1);
}).toErrorDev( }).toErrorDev(
ReactFeatureFlags.warnAboutStringRefs [
? [ 'Warning: Component "Root" contains the string ref "child2". ' +
'Warning: Component "Root" contains the string ref "child2". ' + 'Support for string refs will be removed in a future major release. ' +
'Support for string refs will be removed in a future major release. ' + 'We recommend using useRef() or createRef() instead. ' +
'We recommend using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',
'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', ],
]
: [],
{withoutStack: true}, {withoutStack: true},
); );
expect(inst.refs.child1.tagName).toBe('DIV'); expect(inst.refs.child1.tagName).toBe('DIV');

34
packages/react-reconciler/src/ReactChildFiber.js vendored
View File

@ -28,7 +28,6 @@ import {
} from 'shared/ReactSymbols'; } from 'shared/ReactSymbols';
import {ClassComponent, HostText, HostPortal, Fragment} from './ReactWorkTags'; import {ClassComponent, HostText, HostPortal, Fragment} from './ReactWorkTags';
import isArray from 'shared/isArray'; import isArray from 'shared/isArray';
import {warnAboutStringRefs} from 'shared/ReactFeatureFlags';
import {checkPropStringCoercion} from 'shared/CheckStringCoercion'; import {checkPropStringCoercion} from 'shared/CheckStringCoercion';
import { import {
@ -40,7 +39,6 @@ import {
createFiberFromPortal, createFiberFromPortal,
} from './ReactFiber'; } from './ReactFiber';
import {isCompatibleFamilyForHotReloading} from './ReactFiberHotReloading'; import {isCompatibleFamilyForHotReloading} from './ReactFiberHotReloading';
import {StrictLegacyMode} from './ReactTypeOfMode';
import {getIsHydrating} from './ReactFiberHydrationContext'; import {getIsHydrating} from './ReactFiberHydrationContext';
import {pushTreeFork} from './ReactFiberTreeContext'; import {pushTreeFork} from './ReactFiberTreeContext';
@ -113,10 +111,7 @@ function coerceRef(
typeof mixedRef !== 'object' typeof mixedRef !== 'object'
) { ) {
if (__DEV__) { if (__DEV__) {
// TODO: Clean this up once we turn on the string ref warning for
// everyone, because the strict mode case will no longer be relevant
if ( if (
(returnFiber.mode & StrictLegacyMode || warnAboutStringRefs) &&
// We warn in ReactElement.js if owner and self are equal for string refs // We warn in ReactElement.js if owner and self are equal for string refs
// because these cannot be automatically converted to an arrow function // because these cannot be automatically converted to an arrow function
// using a codemod. Therefore, we don't have to warn about string refs again. // using a codemod. Therefore, we don't have to warn about string refs again.
@ -138,26 +133,15 @@ function coerceRef(
const componentName = const componentName =
getComponentNameFromFiber(returnFiber) || 'Component'; getComponentNameFromFiber(returnFiber) || 'Component';
if (!didWarnAboutStringRefs[componentName]) { if (!didWarnAboutStringRefs[componentName]) {
if (warnAboutStringRefs) { console.error(
console.error( 'Component "%s" contains the string ref "%s". Support for string refs ' +
'Component "%s" contains the string ref "%s". Support for string refs ' + 'will be removed in a future major release. We recommend using ' +
'will be removed in a future major release. We recommend using ' + 'useRef() or createRef() instead. ' +
'useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' +
'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref',
'https://reactjs.org/link/strict-mode-string-ref', componentName,
componentName, mixedRef,
mixedRef, );
);
} else {
console.error(
'A string ref, "%s", has been found within a strict mode tree. ' +
'String refs are a source of potential bugs and should be avoided. ' +
'We recommend using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: ' +
'https://reactjs.org/link/strict-mode-string-ref',
mixedRef,
);
}
didWarnAboutStringRefs[componentName] = true; didWarnAboutStringRefs[componentName] = true;
} }
} }

11
packages/react-reconciler/src/ReactFiberBeginWork.js vendored
View File

@ -97,7 +97,6 @@ import {
disableModulePatternComponents, disableModulePatternComponents,
enableProfilerCommitHooks, enableProfilerCommitHooks,
enableProfilerTimer, enableProfilerTimer,
warnAboutDefaultPropsOnFunctionComponents,
enableScopeAPI, enableScopeAPI,
enableCache, enableCache,
enableLazyContextPropagation, enableLazyContextPropagation,
@ -506,10 +505,7 @@ function updateMemoComponent(
getComponentNameFromType(type), getComponentNameFromType(type),
); );
} }
if ( if (Component.defaultProps !== undefined) {
warnAboutDefaultPropsOnFunctionComponents &&
Component.defaultProps !== undefined
) {
const componentName = getComponentNameFromType(type) || 'Unknown'; const componentName = getComponentNameFromType(type) || 'Unknown';
if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) { if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {
console.error( console.error(
@ -2058,10 +2054,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
} }
} }
if ( if (Component.defaultProps !== undefined) {
warnAboutDefaultPropsOnFunctionComponents &&
Component.defaultProps !== undefined
) {
const componentName = getComponentNameFromType(Component) || 'Unknown'; const componentName = getComponentNameFromType(Component) || 'Unknown';
if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) { if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {

20
packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js vendored
View File

@ -11,7 +11,6 @@
'use strict'; 'use strict';
let React; let React;
let ReactFeatureFlags;
let ReactNoop; let ReactNoop;
let Scheduler; let Scheduler;
@ -20,7 +19,6 @@ describe('ReactIncrementalSideEffects', () => {
jest.resetModules(); jest.resetModules();
React = require('react'); React = require('react');
ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactNoop = require('react-noop-renderer'); ReactNoop = require('react-noop-renderer');
Scheduler = require('scheduler'); Scheduler = require('scheduler');
}); });
@ -1310,17 +1308,13 @@ describe('ReactIncrementalSideEffects', () => {
ReactNoop.render(<Foo />); ReactNoop.render(<Foo />);
expect(() => { expect(() => {
expect(Scheduler).toFlushWithoutYielding(); expect(Scheduler).toFlushWithoutYielding();
}).toErrorDev( }).toErrorDev([
ReactFeatureFlags.warnAboutStringRefs 'Warning: Component "Foo" contains the string ref "bar". ' +
? [ 'Support for string refs will be removed in a future major release. ' +
'Warning: Component "Foo" contains the string ref "bar". ' + 'We recommend using useRef() or createRef() instead. ' +
'Support for string refs will be removed in a future major release. ' + 'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
'We recommend using useRef() or createRef() instead. ' + ' in Foo (at **)',
'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' + ]);
' in Foo (at **)',
]
: [],
);
expect(fooInstance.refs.bar.test).toEqual('test'); expect(fooInstance.refs.bar.test).toEqual('test');
}); });
}); });

6
packages/react-server/src/ReactFizzServer.js vendored
View File

@ -129,7 +129,6 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';
import { import {
disableLegacyContext, disableLegacyContext,
disableModulePatternComponents, disableModulePatternComponents,
warnAboutDefaultPropsOnFunctionComponents,
enableScopeAPI, enableScopeAPI,
enableSuspenseAvoidThisFallbackFizz, enableSuspenseAvoidThisFallbackFizz,
enableFloat, enableFloat,
@ -949,10 +948,7 @@ function validateFunctionComponentInDev(Component: any): void {
} }
} }
if ( if (Component.defaultProps !== undefined) {
warnAboutDefaultPropsOnFunctionComponents &&
Component.defaultProps !== undefined
) {
const componentName = getComponentNameFromType(Component) || 'Unknown'; const componentName = getComponentNameFromType(Component) || 'Unknown';
if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) { if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {

20
packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
View File

@ -9,7 +9,6 @@ PropTypes = null
React = null React = null
ReactDOM = null ReactDOM = null
ReactDOMClient = null ReactDOMClient = null
ReactFeatureFlags = null
act = null act = null
describe 'ReactCoffeeScriptClass', -> describe 'ReactCoffeeScriptClass', ->
@ -23,7 +22,6 @@ describe 'ReactCoffeeScriptClass', ->
React = require 'react' React = require 'react'
ReactDOM = require 'react-dom' ReactDOM = require 'react-dom'
ReactDOMClient = require 'react-dom/client' ReactDOMClient = require 'react-dom/client'
ReactFeatureFlags = require 'shared/ReactFeatureFlags'
act = require('jest-react').act act = require('jest-react').act
PropTypes = require 'prop-types' PropTypes = require 'prop-types'
container = document.createElement 'div' container = document.createElement 'div'
@ -545,17 +543,13 @@ describe 'ReactCoffeeScriptClass', ->
ref = React.createRef() ref = React.createRef()
expect(-> expect(->
test(React.createElement(Foo, ref: ref), 'DIV', 'foo') test(React.createElement(Foo, ref: ref), 'DIV', 'foo')
).toErrorDev( ).toErrorDev([
if ReactFeatureFlags.warnAboutStringRefs 'Warning: Component "Foo" contains the string ref "inner". ' +
then [ 'Support for string refs will be removed in a future major release. ' +
'Warning: Component "Foo" contains the string ref "inner". ' + 'We recommend using useRef() or createRef() instead. ' +
'Support for string refs will be removed in a future major release. ' + 'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
'We recommend using useRef() or createRef() instead. ' + ' in Foo (at **)'
'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' + ]);
' in Foo (at **)'
]
else []
);
expect(ref.current.refs.inner.getName()).toBe 'foo' expect(ref.current.refs.inner.getName()).toBe 'foo'
it 'supports drilling through to the DOM using findDOMNode', -> it 'supports drilling through to the DOM using findDOMNode', ->

20
packages/react/src/__tests__/ReactES6Class-test.js
View File

@ -13,7 +13,6 @@ let PropTypes;
let React; let React;
let ReactDOM; let ReactDOM;
let ReactDOMClient; let ReactDOMClient;
let ReactFeatureFlags;
let act; let act;
describe('ReactES6Class', () => { describe('ReactES6Class', () => {
@ -32,7 +31,6 @@ describe('ReactES6Class', () => {
React = require('react'); React = require('react');
ReactDOM = require('react-dom'); ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client'); ReactDOMClient = require('react-dom/client');
ReactFeatureFlags = require('shared/ReactFeatureFlags');
act = require('jest-react').act; act = require('jest-react').act;
container = document.createElement('div'); container = document.createElement('div');
root = ReactDOMClient.createRoot(container); root = ReactDOMClient.createRoot(container);
@ -587,17 +585,13 @@ describe('ReactES6Class', () => {
const ref = React.createRef(); const ref = React.createRef();
expect(() => { expect(() => {
test(<Foo ref={ref} />, 'DIV', 'foo'); test(<Foo ref={ref} />, 'DIV', 'foo');
}).toErrorDev( }).toErrorDev([
ReactFeatureFlags.warnAboutStringRefs 'Warning: Component "Foo" contains the string ref "inner". ' +
? [ 'Support for string refs will be removed in a future major release. ' +
'Warning: Component "Foo" contains the string ref "inner". ' + 'We recommend using useRef() or createRef() instead. ' +
'Support for string refs will be removed in a future major release. ' + 'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
'We recommend using useRef() or createRef() instead. ' + ' in Foo (at **)',
'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' + ]);
' in Foo (at **)',
]
: [],
);
expect(ref.current.refs.inner.getName()).toBe('foo'); expect(ref.current.refs.inner.getName()).toBe('foo');
}); });

37
packages/react/src/__tests__/ReactStrictMode-test.js
View File

@ -926,18 +926,11 @@ describe('string refs', () => {
expect(() => { expect(() => {
ReactDOM.render(<OuterComponent />, container); ReactDOM.render(<OuterComponent />, container);
}).toErrorDev( }).toErrorDev(
ReactFeatureFlags.warnAboutStringRefs 'Warning: Component "StrictMode" contains the string ref "somestring". ' +
? 'Warning: Component "StrictMode" contains the string ref "somestring". ' + 'Support for string refs will be removed in a future major release. ' +
'Support for string refs will be removed in a future major release. ' + 'We recommend using useRef() or createRef() instead. ' +
'We recommend using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' + ' in OuterComponent (at **)',
' in OuterComponent (at **)'
: 'Warning: A string ref, "somestring", has been found within a strict mode tree. ' +
'String refs are a source of potential bugs and should be avoided. ' +
'We recommend using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: ' +
'https://reactjs.org/link/strict-mode-string-ref\n' +
' in OuterComponent (at **)',
); );
// Dedup // Dedup
@ -973,20 +966,12 @@ describe('string refs', () => {
expect(() => { expect(() => {
ReactDOM.render(<OuterComponent />, container); ReactDOM.render(<OuterComponent />, container);
}).toErrorDev( }).toErrorDev(
ReactFeatureFlags.warnAboutStringRefs 'Warning: Component "InnerComponent" contains the string ref "somestring". ' +
? 'Warning: Component "InnerComponent" contains the string ref "somestring". ' + 'Support for string refs will be removed in a future major release. ' +
'Support for string refs will be removed in a future major release. ' + 'We recommend using useRef() or createRef() instead. ' +
'We recommend using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' + ' in InnerComponent (at **)\n' +
' in InnerComponent (at **)\n' + ' in OuterComponent (at **)',
' in OuterComponent (at **)'
: 'Warning: A string ref, "somestring", has been found within a strict mode tree. ' +
'String refs are a source of potential bugs and should be avoided. ' +
'We recommend using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: ' +
'https://reactjs.org/link/strict-mode-string-ref\n' +
' in InnerComponent (at **)\n' +
' in OuterComponent (at **)',
); );
// Dedup // Dedup

19
packages/react/src/__tests__/ReactTypeScriptClass-test.ts
View File

@ -17,7 +17,6 @@ import ReactDOMClient = require('react-dom/client');
import ReactDOMTestUtils = require('react-dom/test-utils'); import ReactDOMTestUtils = require('react-dom/test-utils');
import PropTypes = require('prop-types'); import PropTypes = require('prop-types');
import internalAct = require('jest-react'); import internalAct = require('jest-react');
import ReactFeatureFlags = require('shared/ReactFeatureFlags')
// Before Each // Before Each
@ -691,17 +690,13 @@ describe('ReactTypeScriptClass', function() {
const ref = React.createRef(); const ref = React.createRef();
expect(() => { expect(() => {
test(React.createElement(ClassicRefs, {ref: ref}), 'DIV', 'foo'); test(React.createElement(ClassicRefs, {ref: ref}), 'DIV', 'foo');
}).toErrorDev( }).toErrorDev([
ReactFeatureFlags.warnAboutStringRefs 'Warning: Component "ClassicRefs" contains the string ref "inner". ' +
? [ 'Support for string refs will be removed in a future major release. ' +
'Warning: Component "ClassicRefs" contains the string ref "inner". ' + 'We recommend using useRef() or createRef() instead. ' +
'Support for string refs will be removed in a future major release. ' + 'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
'We recommend using useRef() or createRef() instead. ' + ' in ClassicRefs (at **)',
'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' + ]);
' in ClassicRefs (at **)',
]
: [],
);
expect(ref.current.refs.inner.getName()).toBe('foo'); expect(ref.current.refs.inner.getName()).toBe('foo');
}); });

7
packages/shared/ReactFeatureFlags.js
View File

@ -207,17 +207,10 @@ export const disableTextareaChildren = false;
// New API for JSX transforms to target - https://github.com/reactjs/rfcs/pull/107 // New API for JSX transforms to target - https://github.com/reactjs/rfcs/pull/107
// Part of the simplification of React.createElement so we can eventually move
// from React.createElement to React.jsx
// https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md
export const warnAboutDefaultPropsOnFunctionComponents = true; // deprecate later, not 18.0
// Enables a warning when trying to spread a 'key' to an element; // Enables a warning when trying to spread a 'key' to an element;
// a deprecated pattern we want to get rid of in the future // a deprecated pattern we want to get rid of in the future
export const warnAboutSpreadingKeyToJSX = true; export const warnAboutSpreadingKeyToJSX = true;
export const warnAboutStringRefs = true;
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// Debugging and DevTools // Debugging and DevTools
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------

2
packages/shared/forks/ReactFeatureFlags.native-fb.js
View File

@ -40,8 +40,6 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
export const enableScopeAPI = false; export const enableScopeAPI = false;
export const enableCreateEventHandleAPI = false; export const enableCreateEventHandleAPI = false;
export const enableSuspenseCallback = false; export const enableSuspenseCallback = false;
export const warnAboutDefaultPropsOnFunctionComponents = true;
export const warnAboutStringRefs = true;
export const disableLegacyContext = false; export const disableLegacyContext = false;
export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
export const enableTrustedTypesIntegration = false; export const enableTrustedTypesIntegration = false;

2
packages/shared/forks/ReactFeatureFlags.native-oss.js
View File

@ -30,8 +30,6 @@ export const enableSchedulerDebugging = false;
export const enableScopeAPI = false; export const enableScopeAPI = false;
export const enableCreateEventHandleAPI = false; export const enableCreateEventHandleAPI = false;
export const enableSuspenseCallback = false; export const enableSuspenseCallback = false;
export const warnAboutDefaultPropsOnFunctionComponents = true;
export const warnAboutStringRefs = true;
export const disableLegacyContext = false; export const disableLegacyContext = false;
export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
export const enableTrustedTypesIntegration = false; export const enableTrustedTypesIntegration = false;

2
packages/shared/forks/ReactFeatureFlags.test-renderer.js
View File

@ -30,8 +30,6 @@ export const enableSchedulerDebugging = false;
export const enableScopeAPI = false; export const enableScopeAPI = false;
export const enableCreateEventHandleAPI = false; export const enableCreateEventHandleAPI = false;
export const enableSuspenseCallback = false; export const enableSuspenseCallback = false;
export const warnAboutDefaultPropsOnFunctionComponents = true;
export const warnAboutStringRefs = true;
export const disableLegacyContext = false; export const disableLegacyContext = false;
export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
export const enableTrustedTypesIntegration = false; export const enableTrustedTypesIntegration = false;

2
packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
View File

@ -30,8 +30,6 @@ export const enableSchedulerDebugging = false;
export const enableScopeAPI = false; export const enableScopeAPI = false;
export const enableCreateEventHandleAPI = false; export const enableCreateEventHandleAPI = false;
export const enableSuspenseCallback = false; export const enableSuspenseCallback = false;
export const warnAboutDefaultPropsOnFunctionComponents = true;
export const warnAboutStringRefs = true;
export const disableLegacyContext = false; export const disableLegacyContext = false;
export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
export const enableTrustedTypesIntegration = false; export const enableTrustedTypesIntegration = false;

2
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
View File

@ -30,8 +30,6 @@ export const disableInputAttributeSyncing = false;
export const enableScopeAPI = true; export const enableScopeAPI = true;
export const enableCreateEventHandleAPI = false; export const enableCreateEventHandleAPI = false;
export const enableSuspenseCallback = true; export const enableSuspenseCallback = true;
export const warnAboutDefaultPropsOnFunctionComponents = true;
export const warnAboutStringRefs = true;
export const disableLegacyContext = false; export const disableLegacyContext = false;
export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
export const enableTrustedTypesIntegration = false; export const enableTrustedTypesIntegration = false;

2
packages/shared/forks/ReactFeatureFlags.testing.js
View File

@ -30,8 +30,6 @@ export const enableSchedulerDebugging = false;
export const enableScopeAPI = false; export const enableScopeAPI = false;
export const enableCreateEventHandleAPI = false; export const enableCreateEventHandleAPI = false;
export const enableSuspenseCallback = false; export const enableSuspenseCallback = false;
export const warnAboutDefaultPropsOnFunctionComponents = true;
export const warnAboutStringRefs = true;
export const disableLegacyContext = false; export const disableLegacyContext = false;
export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
export const enableTrustedTypesIntegration = false; export const enableTrustedTypesIntegration = false;

2
packages/shared/forks/ReactFeatureFlags.testing.www.js
View File

@ -30,8 +30,6 @@ export const enableSchedulerDebugging = false;
export const enableScopeAPI = true; export const enableScopeAPI = true;
export const enableCreateEventHandleAPI = true; export const enableCreateEventHandleAPI = true;
export const enableSuspenseCallback = true; export const enableSuspenseCallback = true;
export const warnAboutDefaultPropsOnFunctionComponents = true;
export const warnAboutStringRefs = true;
export const disableLegacyContext = __EXPERIMENTAL__; export const disableLegacyContext = __EXPERIMENTAL__;
export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
export const enableTrustedTypesIntegration = false; export const enableTrustedTypesIntegration = false;

2
packages/shared/forks/ReactFeatureFlags.www.js
View File

@ -66,8 +66,6 @@ export const enableSchedulingProfiler: boolean =
// At least this will let us stop shipping <Profiler> implementation to all users. // At least this will let us stop shipping <Profiler> implementation to all users.
export const enableSchedulerDebugging = true; export const enableSchedulerDebugging = true;
export const disableLegacyContext = __EXPERIMENTAL__; export const disableLegacyContext = __EXPERIMENTAL__;
export const warnAboutStringRefs = true;
export const warnAboutDefaultPropsOnFunctionComponents = true;
export const enableGetInspectorDataForInstanceInProduction = false; export const enableGetInspectorDataForInstanceInProduction = false;
export const enableCache = true; export const enableCache = true;