Функция для асинхронной загрузки компонентов в React. Преимущество в том, что компоненты загружаются только когда они нужны, а не сразу при загрузке страницы. Данные паттерн называется HOC, так как мы принимаем компонент и возвращаем новый класс, где рендерим компонент когда он готов тем самым оборачиваем его.
import React, { Component } from 'react';
type DynamicImportType = () => Promise<{ default: React.ComponentType }>;
interface IState {
component: React.ComponentType | null;
}
const asyncComponent = (importComponent: DynamicImportType) => class extends Component {
state: IState = {
component: null,
};
componentDidMount() {
importComponent().then((cmp) => {
this.setState({ component: cmp.default });
});
}
render() {
const { component: LoadedComponent } = this.state;
return LoadedComponent ? (
<LoadedComponent {...this.props} />
) : (
<Loader />
);
}
};
export default asyncComponent;