I would like to trigger a dynamic import of a react ponent only after an image is loaded to prioritise first paint. The problem is, it's a context provider ponent 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 ponent:

   <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 ponent 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.

I would like to trigger a dynamic import of a react ponent only after an image is loaded to prioritise first paint. The problem is, it's a context provider ponent 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 ponent:

   <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 ponent 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.

• javascript
• reactjs
• lazy-loading

Share Improve this question Follow edited Nov 9, 2021 at 9:40 Penny Liu 17.6k55 gold badges8686 silver badges108108 bronze badges asked Mar 4, 2021 at 23:10 user1088793user1088793 65333 gold badges1010 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You should not be concerned about when your ponent 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 ments it is clear that your concern not the ponent 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 ...;
}