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.

Mr. Hedgehog · Accepted Answer · 2021-03-05 07:21:45Z

4

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 ...;
}

edited Mar 5, 2021 at 7:21

answered Mar 4, 2021 at 23:23

Mr. Hedgehog

2,8851 gold badge16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1088793 Over a year ago

The reason I am concerned with when is because that component imports firebase (70kb+), that's why I am deferring the import.

Mr. Hedgehog Over a year ago

But it will not be rendered until heroRendered

Mr. Hedgehog Over a year ago

Also, if you concerned about firebase, you can load and initialize it dynamically in useEffect, so it would be imported only after component will render

Benjamin Over a year ago

@user1088793 do you need to import the entire firebase default module? Or have you considered using more selective imports?

user1088793 Over a year ago

@ezhikov this lazy loads the module by default regardless of the condition I believe..

|

Collectives™ on Stack Overflow

How to conditionally lazy load dynamic imports in react?

1 Answer 1

Edit

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related