📦 Advanced Mounting Patterns

Production mounting optimization techniques.

Lazy Component Loading

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));
const AdminPanel = React.lazy(() => import("./AdminPanel"));

function App({ userRole }) {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      {userRole === "admin" && <AdminPanel />}
      <HeavyComponent />
    </React.Suspense>
  );
}

Initialization with Derived State

function useInitialState(initializer, dependencies) {
  const [state, setState] = React.useState(() => initializer());

  React.useEffect(() => {
    setState(initializer());
  }, dependencies);

  return state;
}

function Form({ defaultValues }) {
  const initialValues = useInitialState(
    () => processValues(defaultValues),
    [defaultValues]
  );

  return <div>{initialValues.name}</div>;
}

Mount-Only Initialization

function useInitialize(config) {
  const [initialized, setInitialized] = React.useState(false);

  React.useEffect(() => {
    if (!initialized) {
      initializeApp(config);
      setInitialized(true);
    }
  }, []);

  return initialized;
}

function App({ config }) {
  const ready = useInitialize(config);
  return ready ? <MainApp /> : <LoadingScreen />;
}

✅ Key Takeaways

• Use **lazy loading** to split code and improve mount performance

• Implement **derived state** for efficient initialization

• Create **initialization hooks** for reusability

• Profile mounting with React DevTools