Dynamic imports in React are done using the import() function, which returns a Promise. This means you can load modules only when they are needed, making your app faster.

There are two main ways to implement dynamic imports:

---

✅ Using React.lazy() and Suspense (recommended way for components):

import React, { Suspense } from 'react';

const SettingsPage = React.lazy(() => import('./SettingsPage'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading settings...</div>}>
        <SettingsPage />
      </Suspense>
    </div>
  );
}

Here, SettingsPage will be split into a separate chunk and loaded only when required.

---

✅ Using plain dynamic import for logic or utilities:

You can also dynamically import non-component files like utility functions:

function handleClick() {
  import('./mathUtils').then((utils) => {
    console.log(utils.add(2, 3));
  });
}

Here, mathUtils.js will only be fetched when handleClick is triggered — not before.

---

Real-world Example:

In a dashboard app, you might dynamically load heavy chart libraries (Chart.js, D3.js) only when the user navigates to the Analytics page.
This saves your initial bundle size and speeds up the first paint for users who might never open the Analytics section!

---