Skip to content

Commit acd65db

Browse files
sebmarkbagesebmarkbage
authored
Deprecate module pattern (factory) components (#15145)
1 parent 55cc921 commit acd65db

14 files changed

+151
-41
lines changed

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -977,7 +977,16 @@ describe('ReactComponentLifeCycle', () => {
977977
};
978978

979979
const div = document.createElement('div');
980-
ReactDOM.render(<Parent ref={c => c && log.push('ref')} />, div);
980+
expect(() =>
981+
ReactDOM.render(<Parent ref={c => c && log.push('ref')} />, div),
982+
).toWarnDev(
983+
'Warning: The <Parent /> component appears to be a function component that returns a class instance. ' +
984+
'Change Parent to a class that extends React.Component instead. ' +
985+
"If you can't use a class try assigning the prototype on the function as a workaround. " +
986+
'`Parent.prototype = React.Component.prototype`. ' +
987+
"Don't use an arrow function since it cannot be called with `new` by React.",
988+
{withoutStack: true},
989+
);
981990
ReactDOM.render(<Parent ref={c => c && log.push('ref')} />, div);
982991

983992
expect(log).toEqual([

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,14 @@ describe('ReactCompositeComponent', () => {
118118
}
119119

120120
const el = document.createElement('div');
121-
ReactDOM.render(<Child test="test" />, el);
121+
expect(() => ReactDOM.render(<Child test="test" />, el)).toWarnDev(
122+
'Warning: The <Child /> component appears to be a function component that returns a class instance. ' +
123+
'Change Child to a class that extends React.Component instead. ' +
124+
"If you can't use a class try assigning the prototype on the function as a workaround. " +
125+
'`Child.prototype = React.Component.prototype`. ' +
126+
"Don't use an arrow function since it cannot be called with `new` by React.",
127+
{withoutStack: true},
128+
);
122129

123130
expect(el.textContent).toBe('test');
124131
});

‎packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -474,7 +474,14 @@ describe('ReactCompositeComponent-state', () => {
474474
}
475475

476476
const el = document.createElement('div');
477-
ReactDOM.render(<Child />, el);
477+
expect(() => ReactDOM.render(<Child />, el)).toWarnDev(
478+
'Warning: The <Child /> component appears to be a function component that returns a class instance. ' +
479+
'Change Child to a class that extends React.Component instead. ' +
480+
"If you can't use a class try assigning the prototype on the function as a workaround. " +
481+
'`Child.prototype = React.Component.prototype`. ' +
482+
"Don't use an arrow function since it cannot be called with `new` by React.",
483+
{withoutStack: true},
484+
);
478485

479486
expect(el.textContent).toBe('count:123');
480487
});

‎packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -644,7 +644,7 @@ describe('ReactDOMServerIntegration', () => {
644644
},
645645
};
646646
};
647-
checkFooDiv(await render(<FactoryComponent />));
647+
checkFooDiv(await render(<FactoryComponent />, 1));
648648
});
649649
});
650650

‎packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -768,12 +768,23 @@ describe('ReactErrorBoundaries', () => {
768768
};
769769

770770
const container = document.createElement('div');
771-
ReactDOM.render(
772-
<ErrorBoundary>
773-
<BrokenComponentWillMountWithContext />
774-
</ErrorBoundary>,
775-
container,
771+
expect(() =>
772+
ReactDOM.render(
773+
<ErrorBoundary>
774+
<BrokenComponentWillMountWithContext />
775+
</ErrorBoundary>,
776+
container,
777+
),
778+
).toWarnDev(
779+
'Warning: The <BrokenComponentWillMountWithContext /> component appears to be a function component that ' +
780+
'returns a class instance. ' +
781+
'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +
782+
"If you can't use a class try assigning the prototype on the function as a workaround. " +
783+
'`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +
784+
"Don't use an arrow function since it cannot be called with `new` by React.",
785+
{withoutStack: true},
776786
);
787+
777788
expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
778789
});
779790

‎packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -742,11 +742,21 @@ describe('ReactLegacyErrorBoundaries', () => {
742742
};
743743

744744
const container = document.createElement('div');
745-
ReactDOM.render(
746-
<ErrorBoundary>
747-
<BrokenComponentWillMountWithContext />
748-
</ErrorBoundary>,
749-
container,
745+
expect(() =>
746+
ReactDOM.render(
747+
<ErrorBoundary>
748+
<BrokenComponentWillMountWithContext />
749+
</ErrorBoundary>,
750+
container,
751+
),
752+
).toWarnDev(
753+
'Warning: The <BrokenComponentWillMountWithContext /> component appears to be a function component that ' +
754+
'returns a class instance. ' +
755+
'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +
756+
"If you can't use a class try assigning the prototype on the function as a workaround. " +
757+
'`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +
758+
"Don't use an arrow function since it cannot be called with `new` by React.",
759+
{withoutStack: true},
750760
);
751761
expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
752762
});

‎packages/react-dom/src/__tests__/refs-test.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,17 @@ describe('factory components', () => {
166166
};
167167
}
168168

169-
const inst = ReactTestUtils.renderIntoDocument(<Comp />);
169+
let inst;
170+
expect(
171+
() => (inst = ReactTestUtils.renderIntoDocument(<Comp />)),
172+
).toWarnDev(
173+
'Warning: The <Comp /> component appears to be a function component that returns a class instance. ' +
174+
'Change Comp to a class that extends React.Component instead. ' +
175+
"If you can't use a class try assigning the prototype on the function as a workaround. " +
176+
'`Comp.prototype = React.Component.prototype`. ' +
177+
"Don't use an arrow function since it cannot be called with `new` by React.",
178+
{withoutStack: true},
179+
);
170180
expect(inst.refs.elemRef.tagName).toBe('DIV');
171181
});
172182
});

‎packages/react-dom/src/server/ReactPartialRenderer.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@ let didWarnDefaultTextareaValue = false;
179179
let didWarnInvalidOptionChildren = false;
180180
const didWarnAboutNoopUpdateForComponent = {};
181181
const didWarnAboutBadClass = {};
182+
const didWarnAboutModulePatternComponent = {};
182183
const didWarnAboutDeprecatedWillMount = {};
183184
const didWarnAboutUndefinedDerivedState = {};
184185
const didWarnAboutUninitializedState = {};
@@ -525,6 +526,24 @@ function resolve(
525526
validateRenderResult(child, Component);
526527
return;
527528
}
529+
530+
if (__DEV__) {
531+
const componentName = getComponentName(Component) || 'Unknown';
532+
if (!didWarnAboutModulePatternComponent[componentName]) {
533+
warningWithoutStack(
534+
false,
535+
'The <%s /> component appears to be a function component that returns a class instance. ' +
536+
'Change %s to a class that extends React.Component instead. ' +
537+
"If you can't use a class try assigning the prototype on the function as a workaround. " +
538+
"`%s.prototype = React.Component.prototype`. Don't use an arrow function since it " +
539+
'cannot be called with `new` by React.',
540+
componentName,
541+
componentName,
542+
componentName,
543+
);
544+
didWarnAboutModulePatternComponent[componentName] = true;
545+
}
546+
}
528547
}
529548

530549
inst.props = element.props;

‎packages/react-reconciler/src/ReactFiberBeginWork.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,13 +144,15 @@ const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
144144
let didReceiveUpdate: boolean = false;
145145

146146
let didWarnAboutBadClass;
147+
let didWarnAboutModulePatternComponent;
147148
let didWarnAboutContextTypeOnFunctionComponent;
148149
let didWarnAboutGetDerivedStateOnFunctionComponent;
149150
let didWarnAboutFunctionRefs;
150151
export let didWarnAboutReassigningProps;
151152

152153
if (__DEV__) {
153154
didWarnAboutBadClass = {};
155+
didWarnAboutModulePatternComponent = {};
154156
didWarnAboutContextTypeOnFunctionComponent = {};
155157
didWarnAboutGetDerivedStateOnFunctionComponent = {};
156158
didWarnAboutFunctionRefs = {};
@@ -1222,6 +1224,24 @@ function mountIndeterminateComponent(
12221224
typeof value.render === 'function' &&
12231225
value.$$typeof === undefined
12241226
) {
1227+
if (__DEV__) {
1228+
const componentName = getComponentName(Component) || 'Unknown';
1229+
if (!didWarnAboutModulePatternComponent[componentName]) {
1230+
warningWithoutStack(
1231+
false,
1232+
'The <%s /> component appears to be a function component that returns a class instance. ' +
1233+
'Change %s to a class that extends React.Component instead. ' +
1234+
"If you can't use a class try assigning the prototype on the function as a workaround. " +
1235+
"`%s.prototype = React.Component.prototype`. Don't use an arrow function since it " +
1236+
'cannot be called with `new` by React.',
1237+
componentName,
1238+
componentName,
1239+
componentName,
1240+
);
1241+
didWarnAboutModulePatternComponent[componentName] = true;
1242+
}
1243+
}
1244+
12251245
// Proceed under the assumption that this is a class instance
12261246
workInProgress.tag = ClassComponent;
12271247

‎packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1327,7 +1327,14 @@ describe('ReactHooks', () => {
13271327
expect(renderCount).toBe(1);
13281328

13291329
renderCount = 0;
1330-
renderer.update(<Factory />);
1330+
expect(() => renderer.update(<Factory />)).toWarnDev(
1331+
'Warning: The <Factory /> component appears to be a function component that returns a class instance. ' +
1332+
'Change Factory to a class that extends React.Component instead. ' +
1333+
"If you can't use a class try assigning the prototype on the function as a workaround. " +
1334+
'`Factory.prototype = React.Component.prototype`. ' +
1335+
"Don't use an arrow function since it cannot be called with `new` by React.",
1336+
{withoutStack: true},
1337+
);
13311338
expect(renderCount).toBe(1);
13321339
renderCount = 0;
13331340
renderer.update(<Factory />);

0 commit comments

Comments
 (0)