What if react-loadable was written in hooks(new featuer in react 16.7)'?
Here's a HOC written in hooks to load reactjs component asynchronously
import React, { useEffect, useState } from "react";
import nprogress from "nprogress";
import "nprogress/nprogress.css";
export default (loader, loading) => props => {
const [loadedComponent, setComponent] = useState(null);
// this works like componentwillMount
if (!nprogress.isStarted()) nprogress.start();
if (loadedComponent) nprogress.done();
useEffect(() => {
let mounted = true;
mounted &&
loader().then(
({ default: C }) => mounted && setComponent(<C {...props} />)
);
// componentUnMount
return () => (mounted = false);
}, []);
// return the loaded component
const Component = loadedComponent || loading || <div>loading..</div>;
return Component;
};
Top comments (1)
Hello, I found this cool way to load the components, would have some example where I could go down to see a working solution! - allexon@gmail.com