How to use a react component fetched from an api?

Question

I have an api which provides me a with Webpack processed react component which looks like the following:

module.exports=function(e){var t={};function r(n){if         


        

Answer 1

By using the newest chrome you can do something like this:

const ProfilePage = React.lazy(() => import(/* webpackIgnore: true */ 'https://api.example.com/profile-page.mjs'));

<Suspense fallback={<div>Please wait for component to be loaded</div>}>
  <ProfilePage />
</Suspense>

ProfilePage will be a lazy component. It will be loaded once the fetch completed. While you wait you will see the fallback.

More info:

• https://reactjs.org/docs/concurrent-mode-suspense.html

It is an experimental features!