When will you use this?

Apply when users complain the app feels slow, or Lighthouse shows red scores.

• Slow admin tables with thousands of rows need memo, lazy load, or virtualization.
• Lighthouse scores matter for public sites — clients notice slow pages.

Real-world: HR + CRM shell

Enterprise loads HR React app and CRM React app as remotes inside single shell — teams deploy independently.

Production-style code

// shell App.jsx
const HrApp = lazy(() => import('hrApp/App'));
const CrmApp = lazy(() => import('crmApp/App'));

function EnterpriseShell() {
  const { section } = useParams();
  return (
    <Layout>
      <Suspense fallback={<Spinner />}>
        {section === 'hr' && <HrApp />}
        {section === 'crm' && <CrmApp />}
      </Suspense>
    </Layout>
  );
}

What happens in production: Org scale: separate repos, separate releases, shared design tokens — Module Federation or single-spa.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// Shell loads remote at runtime (Module Federation)
remotes: {
  checkout: 'checkout@https://cdn.example.com/remoteEntry.js'
}

// Shell route
const Checkout = lazy(() => import('checkout/CheckoutApp'));

Line-by-line walkthrough

How it works (big picture)

• Shell handles routing and shared layout.
• Remote teams publish their bundle.
• Shared react/react-dom must be single version.

Do this on your computer

1. Start with modular monolith — split only when team pain is real.
2. Study Module Federation or iframe boundaries.
3. Agree on shared dependency versions.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Open React DevTools (browser extension) while running Micro Frontends and inspect component props/state.

Remember

Split frontend by team/domain. Independent deploys. Use when org scale demands it — not by default.

Common questions