How To Use A React Component Fetched From An Api?

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(t[n])return t[n].expor

Solution 1:

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

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

<Suspensefallback={<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!