01. Dynamic Component Loading

The Problem

A business screen should be able to load a child screen when the user opens it, without putting every screen into the initial UI.

The React Difficulty

React commonly combines dynamic import with `lazy` and `Suspense`. The component is still expressed through React's rendering model and the application decides how the loaded component is mounted.

React Approach

import { lazy, Suspense, useState } from "react";

const DailySale = lazy(() => import("./Sales/DailySale"));

function SalesMenu() {
    const [open, setOpen] = useState(false);
    return <button onClick={() => setOpen(true)}>Daily Sale</button>;
}

function SalesArea() {
    return open ? (
        <Suspense fallback={<span>Loading...</span>}>
            <DailySale />
        </Suspense>
    ) : null;
}

MS Approach

ManySet provides a direct runtime-oriented approach for this recurring business-application task.

const ref = await ms.inject(
    "./Sales/DailySale",
    "content"
);

Why this way is useful in business applications :

The comparison is intended to show where ManySet supplies a business-application abstraction around a recurring task, while keeping HTML and JavaScript visible and directly usable.

Key Point :

ManySet reduces the amount of framework-specific composition required for this particular task, without requiring the React/Angular mechanism to be represented as inherently wrong or incapable.