Challenge 1 / 1

We noticed that react-dom is being included in the JavaScript for every page... even though we only use it to render one component on a single page. What's the correct way to import that module dynamically?

Oh... and to be extra cool... we want to use await.

export default class extends Controller {
    connect() {
        import('react-dom').then((ReactDOM) => {
            ReactDOM.render(
                <FeatureProduct product={this.productValue} />,
                this.element
            )
        });
    }
}

export default class extends Controller {
    async connect() {
        const { default: ReactDOM } = await import('react-dom');
        ReactDOM.render(
            <FeatureProduct product={this.productValue} />,
            this.element
        );
    }
}

export default class extends Controller {
    async onInput() {
        const { default: ReactDOM } = await import('react-dom');
        ReactDOM.render(
            <FeatureProduct product={this.productValue} />,
            this.element
        );
    }
}

Rewatch the video