Adds deprecation warning for ReactDOM.unstable_createPortal (#11747)
Manas committed
Dec 8, 2017 at 15:59 UTC
ac630e4a2f2a6e794c3f9858f606476147e735fd
2 files changed
+25
-1
packages/react-dom/src/__tests__/ReactDOMFiber-test.js
+11
@@ -222,6 +222,7 @@ describe('ReactDOMFiber', () => {
222
223
// TODO: remove in React 17
224
it('should support unstable_createPortal alias', () => {
225
+ spyOnDev(console, 'warn');
226
const portalContainer = document.createElement('div');
227
228
ReactDOM.render(
@@ -233,6 +234,16 @@ describe('ReactDOMFiber', () => {
234
expect(portalContainer.innerHTML).toBe('<div>portal</div>');
235
expect(container.innerHTML).toBe('<div></div>');
236
237
+ if (__DEV__) {
238
+ expect(console.warn.calls.count()).toBe(1);
239
+ expect(console.warn.calls.argsFor(0)[0]).toContain(
240
+ 'The ReactDOM.unstable_createPortal() alias has been deprecated, ' +
241
+ 'and will be removed in React 17+. Update your code to use ' +
242
+ 'ReactDOM.createPortal() instead. It has the exact same API, ' +
243
+ 'but without the "unstable_" prefix.',
244
+ );
245
+ }
246
+
247
ReactDOM.unmountComponentAtNode(container);
248
expect(portalContainer.innerHTML).toBe('');
249
expect(container.innerHTML).toBe('');
packages/react-dom/src/client/ReactDOM.js
+14
-1
@@ -75,6 +75,7 @@ const {precacheFiberNode, updateFiberProps} = ReactDOMComponentTree;
75
let SUPPRESS_HYDRATION_WARNING;
76
let topLevelUpdateWarnings;
77
let warnOnInvalidCallback;
78
+let didWarnAboutUnstableCreatePortal = false;
79
80
if (__DEV__) {
81
SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
@@ -1276,7 +1277,19 @@ const ReactDOM: Object = {
1277
1278
// Temporary alias since we already shipped React 16 RC with it.
1279
// TODO: remove in React 17.
1279
- unstable_createPortal: createPortal,
1280
+ unstable_createPortal(...args) {
1281
+ if (!didWarnAboutUnstableCreatePortal) {
1282
+ didWarnAboutUnstableCreatePortal = true;
1283
+ lowPriorityWarning(
1284
+ false,
1285
+ 'The ReactDOM.unstable_createPortal() alias has been deprecated, ' +
1286
+ 'and will be removed in React 17+. Update your code to use ' +
1287
+ 'ReactDOM.createPortal() instead. It has the exact same API, ' +
1288
+ 'but without the "unstable_" prefix.',
1289
+ );
1290
+ }
1291
+ return createPortal(...args);
1292
+ },
1293
1294
unstable_batchedUpdates: ReactGenericBatching.batchedUpdates,
1295