Warn about refs on lazy function components (#14645)
Dan Abramov committed
Jan 21, 2019 at 16:57 UTC
2a084f51a94df30e3bffd42bf3a04ce3da231512
2 files changed
+27
packages/react-reconciler/src/ReactFiberBeginWork.js
+3
@@ -984,6 +984,9 @@ function mountLazyComponent(
984
let child;
985
switch (resolvedTag) {
986
case FunctionComponent: {
987
+ if (__DEV__) {
988
+ validateFunctionComponentInDev(workInProgress, Component);
989
+ }
990
child = updateFunctionComponent(
991
null,
992
workInProgress,
packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+24
@@ -1064,4 +1064,28 @@ describe('ReactLazy', () => {
1064
root.unstable_flushAll();
1065
expect(root).toMatchRenderedOutput('2');
1066
});
1067
+
1068
+ it('warns about ref on functions for lazy-loaded components', async () => {
1069
+ const LazyFoo = lazy(() => {
1070
+ const Foo = props => <div />;
1071
+ return fakeImport(Foo);
1072
+ });
1073
+
1074
+ const ref = React.createRef();
1075
+ const root = ReactTestRenderer.create(
1076
+ <Suspense fallback={<Text text="Loading..." />}>
1077
+ <LazyFoo ref={ref} />
1078
+ </Suspense>,
1079
+ {
1080
+ unstable_isConcurrent: true,
1081
+ },
1082
+ );
1083
+
1084
+ expect(root).toFlushAndYield(['Loading...']);
1085
+ expect(root).toMatchRenderedOutput(null);
1086
+ await Promise.resolve();
1087
+ expect(() => {
1088
+ expect(root).toFlushAndYield([]);
1089
+ }).toWarnDev('Function components cannot be given refs');
1090
+ });
1091
});