How to conditionally lazy load dynamic imports in react?

Question

I would like to trigger a dynamic import of a react component only after an image is loaded to prioritise first paint. The problem is, it's a context provider component and having some trouble as a result.

So I have a dynamic import here in the file auth.js :

   const AuthContextPreloader = hasWindow
   ? lazy(() => import("./AuthContextPreloader"))
   : null;

And I have an image here in a separate component:

   <img
      ref={() => hasWindow && imageLoaded()}
      className={styles.optionsImageImg}
      alt={"nav"}
      src={didLoad && thumb.jpg}
      type="image/jpeg"
    />

And once loaded I a send state up the component tree to hand down to AuthContextPreloader

    const imageLoaded = () => {
      setheroLoaded(true);
     };

Some pseudo-code to try and achieve this in auth.js :

  useEffect(() => {
    props.heroLoaded && **trigger the lazyload**;
  }, [props.heroLoaded]);

But totally unsure how to implement that. Thank you.

Answer 1

You should not be concerned about when your component will be loaded. Your concern should be when to render it. Something like that:

const AuthContextPreloader = hasWindow
  ? lazy(() => import("./AuthContextPreloader"))
  : null;

function ComponentWhereWouldBeRenderedAuthContextPreloader(props) {
  return props.heroLoaded ? <Suspense><AuthContextPreloader /> </Suspense> : null;
}

This way you will not consider yourself with internals, but will render your current application state.

Edit

From the comments it is clear that your concern not the component itslef, but it's large dependency.

In this case you can do something like this:

function ComponentWhereWouldBeRenderedAuthContextPreloader(props) {
  return props.heroLoaded ? <AuthContextPreloader /> : null;
}

function AuthContextPreloader(props) {
  let [dependencyState, setDependencyState] = useState("not_loaded");
  useEffect(function () {
    import("large-dependency")
      .then(function (module) {
        // return either default, or named exports that you need, or skip this step
        return module.default;
      })
      .then(function (dep) {
        // do something with dependency and then change state
        setDependencyState("loaded");
      });
  }, []);
  if (depenencyState === "not_loaded") return null;
  return ...;
}