Dynamic Imports in React

Dynamic imports in React allow you to dynamically load JavaScript modules at runtime, which can significantly improve your application’s performance and load times. This technique is particularly useful for code splitting and lazy loading, ensuring that only the necessary code is loaded when needed.

The import() function returns a Promise that resolves to the module you want to use dynamic import.

A normal import in JavaScript (using the import statement) does not return a Promise. It's a synchronous operation and returns the exported values from the imported module.

import React from 'react';

const AnotherComponent = () => {
  return <div>Another component loaded dynamically!</div>;
};

export default AnotherComponent;

const MyComponent = () => {
  const [importedComponent, setImportedComponent] = useState(null);

  useEffect(() => {
    const importComponent = async () => {
      const module = await import('./AnotherComponent');
      const AnotherComponent = module.default;
      setImportedComponent(<AnotherComponent />);
    };

    importComponent();
  }, []);

  return (
    <div>
      {importedComponent}
      <div>This is my functional component!</div>
    </div>
  );
};

///Another Way is ...///
const MyComponent = async () => {
  const module = import('./AnotherComponent');
  const {AnotherComponent} = await module;
  return <AnotherComponent />;
};

export default MyComponent;

// when u console the export module { default: ""} is contains the all the
// key value pair of the functions name as the key and the value as the 
// definition, with a default key if something is imported as default it
// will be it's value else it will be undefined

When To Use Dynamic Imports?

Although dynamic imports are a great way to improve the performance of your React applications, there are better use cases for using dynamic imports in React apps.

• Code Modulation: Dynamic imports can be used when there’s a need for code modulation and fetching data from a server. An example can be found in server-side rendered applications.
• Dynamic imports can be used when components are not needed when an application is still loading.
• Conditional imports are an excellent use case for dynamic imports; here, a module or component is only imported on pages where they’re needed and when needed in an application.

React.lazy()

The React.lazy() function allows you to render a dynamic import as a regular component. Basically, React.lazy() makes a call to a dynamic import and returns a promise.

import React, { lazy } from "react";​
const Blog = React.lazy(() => 
  import('./Pages/Blog'));

React.Suspense()

React.Suspense allows React developers to conditionally suspend the rendering of a React component until it is loaded. React.Suspense provides a fallback prop that accepts a React element which either is a JSX snippet or a React component.

When users visit a page using React dynamic imports, oftentimes they experience a blank page screen, this is done while the application loads the module, this can also cause errors as a result of slow internet connectivity for some users. React.lazy() and React.Suspense when combined solves this issue for users.

To do this, use React.Suspense to suspend the rendering of a component until all dependencies are lazy-loaded, React.Suspense will also display your fallback UI for the user.

import React, { Suspense } from 'react';

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

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
};

export default App;

If you’d like to be in the know, subscribe, clap, like and share. Cheers!