Fix React.lazy(forwardRef) (#13446)
* Fix React.lazy(forwardRef) * Forbid bad typeof
Dan Abramov committed
Aug 20, 2018 at 17:28 UTC
bf1abf478bc14677c105ba397b14efb91401499e
3 files changed
+38
-2
.eslintrc.js
+1
@@ -41,6 +41,7 @@ module.exports = {
41
'quotes': [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true }],
42
'space-before-blocks': ERROR,
43
'space-before-function-paren': OFF,
44
+ 'valid-typeof': [ERROR, {requireStringLiterals: true}],
45
46
// React & JSX
47
// Our transforms set this automatically
packages/react-reconciler/src/ReactFiberLazyComponent.js
+1
-1
@@ -33,7 +33,7 @@ export function readLazyComponentType<T>(thenable: Thenable<T>): T {
33
// resolved value itself.
34
const defaultExport = (resolvedValue: any).default;
35
resolvedValue =
36
- typeof defaultExport !== undefined && defaultExport !== null
36
+ defaultExport !== undefined && defaultExport !== null
37
? defaultExport
38
: resolvedValue;
39
} else {
packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+36
-1
@@ -72,7 +72,7 @@ describe('ReactSuspense', () => {
72
73
function Text(props) {
74
ReactNoop.yield(props.text);
75
- return <span prop={props.text} />;
75
+ return <span prop={props.text} ref={props.hostRef} />;
76
}
77
78
function AsyncText(props) {
@@ -1600,6 +1600,41 @@ describe('ReactSuspense', () => {
1600
}).toWarnDev(' in Text (at **)\n' + ' in Foo (at **)');
1601
expect(ReactNoop.getChildren()).toEqual([div(span('A'), span('B'))]);
1602
});
1603
+
1604
+ it('supports class and forwardRef components', async () => {
1605
+ const LazyClass = lazy(() => {
1606
+ class Foo extends React.Component {
1607
+ render() {
1608
+ return <Text text="Foo" />;
1609
+ }
1610
+ }
1611
+ return Promise.resolve(Foo);
1612
+ });
1613
+
1614
+ const LazyForwardRef = lazy(() => {
1615
+ const Bar = React.forwardRef((props, ref) => (
1616
+ <Text text="Bar" hostRef={ref} />
1617
+ ));
1618
+ return Promise.resolve(Bar);
1619
+ });
1620
+
1621
+ const ref = React.createRef();
1622
+ ReactNoop.render(
1623
+ <Placeholder fallback={<Text text="Loading..." />}>
1624
+ <LazyClass />
1625
+ <LazyForwardRef ref={ref} />
1626
+ </Placeholder>,
1627
+ );
1628
+ expect(ReactNoop.flush()).toEqual(['Loading...']);
1629
+ expect(ReactNoop.getChildren()).toEqual([]);
1630
+ expect(ref.current).toBe(null);
1631
+
1632
+ await LazyClass;
1633
+ await LazyForwardRef;
1634
+ expect(ReactNoop.flush()).toEqual(['Foo', 'Bar']);
1635
+ expect(ReactNoop.getChildren()).toEqual([span('Foo'), span('Bar')]);
1636
+ expect(ref.current).not.toBe(null);
1637
+ });
1638
});
1639
1640
it('does not call lifecycles of a suspended component', async () => {