diff --git a/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js b/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js
index 9d29ef5a34c6d..ce89d56e23fbf 100644
--- a/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js
@@ -64,12 +64,10 @@ describe('ReactDeprecationWarnings', () => {
expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
'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.' +
- '\n\n' +
- ' in Component (at **)' +
- '\n\n' +
- 'Learn more about using refs safely here:\n' +
- 'https://fb.me/react-strict-mode-string-ref',
+ 'We recommend using useRef() or createRef() instead. ' +
+ 'Learn more about using refs safely here: ' +
+ 'https://fb.me/react-strict-mode-string-ref' +
+ '\n in Component (at **)',
);
});
});
diff --git a/packages/react-dom/src/__tests__/findDOMNode-test.js b/packages/react-dom/src/__tests__/findDOMNode-test.js
index 2be58e0c67115..3dbad1001a861 100644
--- a/packages/react-dom/src/__tests__/findDOMNode-test.js
+++ b/packages/react-dom/src/__tests__/findDOMNode-test.js
@@ -120,14 +120,12 @@ describe('findDOMNode', () => {
expect(() => (match = ReactDOM.findDOMNode(parent))).toWarnDev([
'Warning: findDOMNode is deprecated in StrictMode. ' +
'findDOMNode was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' +
- 'Instead, add a ref directly to the element you want to reference.' +
- '\n' +
+ 'Instead, add a ref directly to the element you want to reference. ' +
+ 'Learn more about using refs safely here: ' +
+ 'https://fb.me/react-strict-mode-find-node' +
'\n in div (at **)' +
'\n in StrictMode (at **)' +
- '\n in ContainsStrictModeChild (at **)' +
- '\n' +
- '\nLearn more about using refs safely here:' +
- '\nhttps://fb.me/react-strict-mode-find-node',
+ '\n in ContainsStrictModeChild (at **)',
]);
expect(match).toBe(child);
});
@@ -152,14 +150,12 @@ describe('findDOMNode', () => {
expect(() => (match = ReactDOM.findDOMNode(parent))).toWarnDev([
'Warning: findDOMNode is deprecated in StrictMode. ' +
'findDOMNode was passed an instance of IsInStrictMode which is inside StrictMode. ' +
- 'Instead, add a ref directly to the element you want to reference.' +
- '\n' +
+ 'Instead, add a ref directly to the element you want to reference. ' +
+ 'Learn more about using refs safely here: ' +
+ 'https://fb.me/react-strict-mode-find-node' +
'\n in div (at **)' +
'\n in IsInStrictMode (at **)' +
- '\n in StrictMode (at **)' +
- '\n' +
- '\nLearn more about using refs safely here:' +
- '\nhttps://fb.me/react-strict-mode-find-node',
+ '\n in StrictMode (at **)',
]);
expect(match).toBe(child);
});
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
index e13718ad7374a..cbfff45d4bf45 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -885,14 +885,12 @@ describe('ReactFabric', () => {
expect(() => (match = ReactFabric.findNodeHandle(parent))).toWarnDev([
'Warning: findNodeHandle is deprecated in StrictMode. ' +
'findNodeHandle was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' +
- 'Instead, add a ref directly to the element you want to reference.' +
- '\n' +
+ 'Instead, add a ref directly to the element you want to reference. ' +
+ 'Learn more about using refs safely here: ' +
+ 'https://fb.me/react-strict-mode-find-node' +
'\n in RCTView (at **)' +
'\n in StrictMode (at **)' +
- '\n in ContainsStrictModeChild (at **)' +
- '\n' +
- '\nLearn more about using refs safely here:' +
- '\nhttps://fb.me/react-strict-mode-find-node',
+ '\n in ContainsStrictModeChild (at **)',
]);
expect(match).toBe(child._nativeTag);
});
@@ -923,14 +921,12 @@ describe('ReactFabric', () => {
expect(() => (match = ReactFabric.findNodeHandle(parent))).toWarnDev([
'Warning: findNodeHandle is deprecated in StrictMode. ' +
'findNodeHandle was passed an instance of IsInStrictMode which is inside StrictMode. ' +
- 'Instead, add a ref directly to the element you want to reference.' +
- '\n' +
+ 'Instead, add a ref directly to the element you want to reference. ' +
+ 'Learn more about using refs safely here: ' +
+ 'https://fb.me/react-strict-mode-find-node' +
'\n in RCTView (at **)' +
'\n in IsInStrictMode (at **)' +
- '\n in StrictMode (at **)' +
- '\n' +
- '\nLearn more about using refs safely here:' +
- '\nhttps://fb.me/react-strict-mode-find-node',
+ '\n in StrictMode (at **)',
]);
expect(match).toBe(child._nativeTag);
});
diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
index ce51af605f4b5..a22d9ee7e86c1 100644
--- a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
@@ -669,14 +669,12 @@ describe('ReactNative', () => {
expect(() => (match = ReactNative.findNodeHandle(parent))).toWarnDev([
'Warning: findNodeHandle is deprecated in StrictMode. ' +
'findNodeHandle was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' +
- 'Instead, add a ref directly to the element you want to reference.' +
- '\n' +
+ 'Instead, add a ref directly to the element you want to reference. ' +
+ 'Learn more about using refs safely here: ' +
+ 'https://fb.me/react-strict-mode-find-node' +
'\n in RCTView (at **)' +
'\n in StrictMode (at **)' +
- '\n in ContainsStrictModeChild (at **)' +
- '\n' +
- '\nLearn more about using refs safely here:' +
- '\nhttps://fb.me/react-strict-mode-find-node',
+ '\n in ContainsStrictModeChild (at **)',
]);
expect(match).toBe(child._nativeTag);
});
@@ -707,14 +705,12 @@ describe('ReactNative', () => {
expect(() => (match = ReactNative.findNodeHandle(parent))).toWarnDev([
'Warning: findNodeHandle is deprecated in StrictMode. ' +
'findNodeHandle was passed an instance of IsInStrictMode which is inside StrictMode. ' +
- 'Instead, add a ref directly to the element you want to reference.' +
- '\n' +
+ 'Instead, add a ref directly to the element you want to reference. ' +
+ 'Learn more about using refs safely here: ' +
+ 'https://fb.me/react-strict-mode-find-node' +
'\n in RCTView (at **)' +
'\n in IsInStrictMode (at **)' +
- '\n in StrictMode (at **)' +
- '\n' +
- '\nLearn more about using refs safely here:' +
- '\nhttps://fb.me/react-strict-mode-find-node',
+ '\n in StrictMode (at **)',
]);
expect(match).toBe(child._nativeTag);
});
diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js
index af113294a946a..fb94fe1df1466 100644
--- a/packages/react-reconciler/src/ReactChildFiber.js
+++ b/packages/react-reconciler/src/ReactChildFiber.js
@@ -125,10 +125,9 @@ function coerceRef(
false,
'Component "%s" contains the string ref "%s". Support for string refs ' +
'will be removed in a future major release. We recommend using ' +
- 'useRef() or createRef() instead.' +
- '\n%s' +
- '\n\nLearn more about using refs safely here:' +
- '\nhttps://fb.me/react-strict-mode-string-ref',
+ 'useRef() or createRef() instead. ' +
+ 'Learn more about using refs safely here: ' +
+ 'https://fb.me/react-strict-mode-string-ref%s',
componentName,
mixedRef,
getStackByFiberInDevAndProd(returnFiber),
@@ -138,10 +137,9 @@ function coerceRef(
false,
'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.' +
- '\n%s' +
- '\n\nLearn more about using refs safely here:' +
- '\nhttps://fb.me/react-strict-mode-string-ref',
+ 'We recommend using useRef() or createRef() instead. ' +
+ 'Learn more about using refs safely here: ' +
+ 'https://fb.me/react-strict-mode-string-ref%s',
mixedRef,
getStackByFiberInDevAndProd(returnFiber),
);
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index dc62033d9389d..81c8418263d65 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -261,10 +261,9 @@ function findHostInstanceWithWarning(
false,
'%s is deprecated in StrictMode. ' +
'%s was passed an instance of %s which is inside StrictMode. ' +
- 'Instead, add a ref directly to the element you want to reference.' +
- '\n%s' +
- '\n\nLearn more about using refs safely here:' +
- '\nhttps://fb.me/react-strict-mode-find-node',
+ 'Instead, add a ref directly to the element you want to reference. ' +
+ 'Learn more about using refs safely here: ' +
+ 'https://fb.me/react-strict-mode-find-node%s',
methodName,
methodName,
componentName,
@@ -275,10 +274,9 @@ function findHostInstanceWithWarning(
false,
'%s is deprecated in StrictMode. ' +
'%s was passed an instance of %s which renders StrictMode children. ' +
- 'Instead, add a ref directly to the element you want to reference.' +
- '\n%s' +
- '\n\nLearn more about using refs safely here:' +
- '\nhttps://fb.me/react-strict-mode-find-node',
+ 'Instead, add a ref directly to the element you want to reference. ' +
+ 'Learn more about using refs safely here: ' +
+ 'https://fb.me/react-strict-mode-find-node%s',
methodName,
methodName,
componentName,
diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.js b/packages/react-reconciler/src/ReactStrictModeWarnings.js
index 87d19201934aa..6f9c34311340e 100644
--- a/packages/react-reconciler/src/ReactStrictModeWarnings.js
+++ b/packages/react-reconciler/src/ReactStrictModeWarnings.js
@@ -346,14 +346,14 @@ if (__DEV__) {
warningWithoutStack(
false,
- 'Legacy context API has been detected within a strict-mode tree: %s' +
+ 'Legacy context API has been detected within a strict-mode tree.' +
'\n\nThe old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.' +
'\n\nPlease update the following components: %s' +
- '\n\nLearn more about this warning here:' +
- '\nhttps://fb.me/react-legacy-context',
- strictRootComponentStack,
+ '\n\nLearn more about this warning here: https://fb.me/react-legacy-context' +
+ '%s',
sortedNames,
+ strictRootComponentStack,
);
},
);
diff --git a/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js
index 3854a56fabd52..d4448cf8c0ec6 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js
@@ -1913,7 +1913,7 @@ describe('ReactIncremental', () => {
'ShowBoth {"locale":"fr"}',
]),
).toWarnDev(
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.\n\n' +
'Please update the following components: Intl, ShowBoth, ShowLocale',
@@ -1970,7 +1970,7 @@ describe('ReactIncremental', () => {
'ShowBoth {"locale":"en"}',
]),
).toWarnDev(
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.\n\n' +
'Please update the following components: Router, ShowRoute',
@@ -2001,7 +2001,7 @@ describe('ReactIncremental', () => {
ReactNoop.render();
expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.\n\n' +
'Please update the following components: Recurse',
@@ -2046,7 +2046,7 @@ describe('ReactIncremental', () => {
"If you can't use a class try assigning the prototype on the function as a workaround. " +
'`Recurse.prototype = React.Component.prototype`. ' +
"Don't use an arrow function since it cannot be called with `new` by React.",
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.\n\n' +
'Please update the following components: Recurse',
@@ -2114,7 +2114,7 @@ describe('ReactIncremental', () => {
'ShowLocale {"locale":"ru"}',
]),
).toWarnDev(
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.\n\n' +
'Please update the following components: Intl, ShowLocale',
@@ -2195,7 +2195,7 @@ describe('ReactIncremental', () => {
,
);
expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.\n\n' +
'Please update the following components: Intl, ShowLocaleClass, ShowLocaleFn',
@@ -2289,7 +2289,7 @@ describe('ReactIncremental', () => {
,
);
expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.\n\n' +
'Please update the following components: Intl, ShowLocaleClass, ShowLocaleFn',
@@ -2360,7 +2360,7 @@ describe('ReactIncremental', () => {
// Init
ReactNoop.render();
expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.\n\n' +
'Please update the following components: Child',
@@ -2412,7 +2412,7 @@ describe('ReactIncremental', () => {
// Init
ReactNoop.render();
expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.\n\n' +
'Please update the following components: ContextProvider',
@@ -2465,7 +2465,7 @@ describe('ReactIncremental', () => {
expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
[
'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended',
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.\n\n' +
'Please update the following components: MyComponent',
@@ -2614,7 +2614,7 @@ describe('ReactIncremental', () => {
);
expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.\n\n' +
'Please update the following components: Child, TopContextProvider',
@@ -2678,7 +2678,7 @@ describe('ReactIncremental', () => {
);
expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.\n\n' +
'Please update the following components: Child, MiddleContextProvider, TopContextProvider',
@@ -2751,7 +2751,7 @@ describe('ReactIncremental', () => {
);
expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.\n\n' +
'Please update the following components: Child, MiddleContextProvider, TopContextProvider',
@@ -2834,7 +2834,7 @@ describe('ReactIncremental', () => {
);
expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.\n\n' +
'Please update the following components: Child, MiddleContextProvider, TopContextProvider',
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 66f47b0b41289..9020e3d739cb9 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -1118,7 +1118,7 @@ describe('ReactIncrementalErrorHandling', () => {
,
);
expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but ' +
'applications using it should migrate to the new version.\n\n' +
'Please update the following components: Connector, Provider',
@@ -1621,7 +1621,7 @@ describe('ReactIncrementalErrorHandling', () => {
"If you can't use a class try assigning the prototype on the function as a workaround. " +
'`Provider.prototype = React.Component.prototype`. ' +
"Don't use an arrow function since it cannot be called with `new` by React.",
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but ' +
'applications using it should migrate to the new version.\n\n' +
'Please update the following components: Provider',
diff --git a/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js
index 5723ca9937527..b08aa0762df46 100644
--- a/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js
@@ -1196,7 +1196,7 @@ describe('ReactNewContext', () => {
expect(() => {
expect(Scheduler).toFlushAndYield(['LegacyProvider', 'App', 'Child']);
}).toWarnDev(
- 'Legacy context API has been detected within a strict-mode tree: \n\n' +
+ 'Legacy context API has been detected within a strict-mode tree.\n\n' +
'The old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.\n\n' +
'Please update the following components: LegacyProvider',
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
index 085bf94e1c792..8dea81c71d528 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -693,11 +693,11 @@ Please update the following components: Parent`,
}).toWarnDev(
'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.\n\n' +
+ 'We recommend using useRef() or createRef() instead. ' +
+ 'Learn more about using refs safely here: ' +
+ 'https://fb.me/react-strict-mode-string-ref\n' +
' in StrictMode (at **)\n' +
- ' in OuterComponent (at **)\n\n' +
- 'Learn more about using refs safely here:\n' +
- 'https://fb.me/react-strict-mode-string-ref',
+ ' in OuterComponent (at **)',
);
// Dedup
@@ -735,12 +735,12 @@ Please update the following components: Parent`,
}).toWarnDev(
'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.\n\n' +
+ 'We recommend using useRef() or createRef() instead. ' +
+ 'Learn more about using refs safely here: ' +
+ 'https://fb.me/react-strict-mode-string-ref\n' +
' in InnerComponent (at **)\n' +
' in StrictMode (at **)\n' +
- ' in OuterComponent (at **)\n\n' +
- 'Learn more about using refs safely here:\n' +
- 'https://fb.me/react-strict-mode-string-ref',
+ ' in OuterComponent (at **)',
);
// Dedup
@@ -813,16 +813,16 @@ Please update the following components: Parent`,
expect(() => {
rendered = ReactTestRenderer.create();
}).toWarnDev(
- 'Warning: Legacy context API has been detected within a strict-mode tree: ' +
- '\n in StrictMode (at **)' +
- '\n in div (at **)' +
- '\n in Root (at **)' +
+ 'Warning: Legacy context API has been detected within a strict-mode tree.' +
'\n\nThe old API will be supported in all 16.x releases, but applications ' +
'using it should migrate to the new version.' +
'\n\nPlease update the following components: ' +
'FunctionalLegacyContextConsumer, LegacyContextConsumer, LegacyContextProvider' +
- '\n\nLearn more about this warning here:' +
- '\nhttps://fb.me/react-legacy-context',
+ '\n\nLearn more about this warning here: ' +
+ 'https://fb.me/react-legacy-context' +
+ '\n in StrictMode (at **)' +
+ '\n in div (at **)' +
+ '\n in Root (at **)',
);
// Dedupe