37 lines
797 B
JavaScript
37 lines
797 B
JavaScript
|
/**
|
||
|
|
* We use this component to leverage "Code Splitting"
|
||
|
|
*
|
||
|
|
* Link: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React, { Component } from 'react'
|
||
|
|
|
||
|
|
export default function asyncComponent(importComponent) {
|
||
|
|
class AsyncComponent extends Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props)
|
||
|
|
|
||
|
|
this.state = {
|
||
|
|
component: null,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async componentDidMount() {
|
||
|
|
// Add dynamically loaded component to state
|
||
|
|
const { default: component } = await importComponent()
|
||
|
|
|
||
|
|
this.setState({
|
||
|
|
component: component,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const C = this.state.component
|
||
|
|
|
||
|
|
// Render the loaded component, or null
|
||
|
|
return C ? <C {...this.props} /> : null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return AsyncComponent
|
||
|
|
}
|