diff --git a/packages/component/src/createLoadable.js b/packages/component/src/createLoadable.js
index 8ef2d5b1..a3b102c7 100644
--- a/packages/component/src/createLoadable.js
+++ b/packages/component/src/createLoadable.js
@@ -89,6 +89,37 @@ function createLoadable({
return Component
}
+ const cachedLoad = props => {
+ const cacheKey = getCacheKey(props)
+ let promise = cache[cacheKey]
+
+ if (!promise || promise.status === STATUS_REJECTED) {
+ promise = ctor.requireAsync(props)
+ promise.status = STATUS_PENDING
+
+ cache[cacheKey] = promise
+
+ promise.then(
+ () => {
+ promise.status = STATUS_RESOLVED
+ },
+ error => {
+ console.error(
+ 'loadable-components: failed to asynchronously load component',
+ {
+ fileName: ctor.resolve(props),
+ chunkName: ctor.chunkName(props),
+ error: error ? error.message : error,
+ },
+ )
+ promise.status = STATUS_REJECTED
+ },
+ )
+ }
+
+ return promise
+ }
+
class InnerLoadable extends React.Component {
static getDerivedStateFromProps(props, state) {
const cacheKey = getCacheKey(props)
@@ -270,33 +301,7 @@ function createLoadable({
resolveAsync() {
const { __chunkExtractor, forwardedRef, ...props } = this.props
- let promise = this.getCache()
-
- if (!promise) {
- promise = ctor.requireAsync(props)
- promise.status = STATUS_PENDING
-
- this.setCache(promise)
-
- promise.then(
- () => {
- promise.status = STATUS_RESOLVED
- },
- error => {
- console.error(
- 'loadable-components: failed to asynchronously load component',
- {
- fileName: ctor.resolve(this.props),
- chunkName: ctor.chunkName(this.props),
- error: error ? error.message : error,
- },
- )
- promise.status = STATUS_REJECTED
- },
- )
- }
-
- return promise
+ return cachedLoad(props)
}
render() {
@@ -343,12 +348,11 @@ function createLoadable({
// In future, preload could use ``
Loadable.preload = props => {
- cache[getCacheKey()] = ctor.requireAsync(props);
+ Loadable.load(props)
}
Loadable.load = props => {
- cache[getCacheKey()] = ctor.requireAsync(props);
- return cache[getCacheKey()];
+ return cachedLoad(props)
}
return Loadable
diff --git a/packages/component/src/loadable.test.js b/packages/component/src/loadable.test.js
index 1a618a0b..60c77b3b 100644
--- a/packages/component/src/loadable.test.js
+++ b/packages/component/src/loadable.test.js
@@ -115,7 +115,7 @@ describe('#loadable', () => {
const { container } = render()
expect(container).toBeEmpty()
await wait(() => expect(container).toHaveTextContent('loaded'))
- expect(load).toHaveBeenCalledTimes(2)
+ expect(load).toHaveBeenCalledTimes(1)
})
it('supports commonjs default export', async () => {