1

(Simplified example): I have Component A and Component B, which are sibling components and are both lazy-loaded in App.js:

import { lazy, Suspense } from 'react';
const A = lazy(() => import('./A'));
const B = lazy(() => import('./B'));

const App = () => (

    <Suspense fallback={<div>Loading...</div>}
        { someCondition &&
            <A />
        }
        { someOtherCondition &&
            <B />
        }
    </Suspense>

);

Would it be possible to load B when A is loaded (Basically when someCondition is true), without having to render B until later? This way, the loading of components is grouped and my website can be uninterrupted after the first lazy load.

Thank you in advance! If someone has a solution I will mark their answer as Correct.

aryanm
  • 1,183
  • 14
  • 26
  • Can't understand what "without having to render B until later" means, you can pass and use the condition in `B`, it may mount but the logic won't run. – Dennis Vash Dec 29 '20 at 09:26
  • 1
    Or you can have a compound of A and lazy B which will lead to the same result as mentioned. – Dennis Vash Dec 29 '20 at 09:30
  • On another note, this question smells like XY problem: https://xyproblem.info/, you trying to ask how to solve in your way instead of tackle the real problem, because using `lazy` is pretty much an edge problem. – Dennis Vash Dec 29 '20 at 09:32

0 Answers0