Lazy Loading

Step 3: Import Components

As mentioned earlier, we need to import the components that will be rendered when a user navigates to a specific path. To accomplish this, we will use the lazy function from the React library. By using lazy, we can defer the loading of a component's code until it is rendered for the first time. The syntax is as follows:

• Line 1: This imports the lazy function from the React library, which enables code splitting and lazy loading of components.
• Line 3: Here, we declare a variable named View using the lazy function. The lazy function takes a function as an argument, which returns a dynamic import statement. The import statement asynchronously imports the View.js file/module. The relative path (./View.js) specifies the file to import. By wrapping the import statement with lazy, we enable lazy loading of the View.js component.

Note

In development, asynchronous refers to the execution of tasks independently and concurrently without waiting for each task to complete. It enables more efficient handling of time-consuming operations, enhancing responsiveness.

Note

lazy is a technique used in React to improve performance by loading components asynchronously when they are actually needed. It helps ensure that the initial loading of the application is faster and more efficient.

Example: Now, let's import the components for different views into our app. It's important to note that the views have already been created, and our current task is to utilize them in the routing:

Code explanation: We use the lazy function from the React library to import the components for the home page, about page, and contacts page. Each component is imported dynamically using the import statement, and the relative paths (../HomePage/HomePage, ../AboutPage/AboutPage, ../ContactsPage/ContactsPage) specify the locations of the respective component files.

Complete code

Step 4: Implementing a Fallback Component

The following important feature we need to incorporate is the ability to display a fallback component while the content is loading. This allows us to engage users by showing a visually pleasing UI component while specific web pages are loading. The syntax for implementing this feature is as follows:

• Line 1: This imports the Suspense component from the React library.
• Lines 5 and 7: We wrap all the app routes with the Suspense component. This enables us to display a fallback component while any route is loaded.
• Line 5: The Suspense component accepts a fallback prop. In this case, the fallback prop is set to <LoaderComponent/>, which specifies the content to be displayed while the main content is loading.

Example: We integrate a fallback mechanism into our app.

Code explanation: The code demonstrates the integration of a fallback mechanism in the App component. Using the Suspense component with a fallback specified as <Loader /> ensures this message is displayed while the routes are loaded. This enhances the user experience by providing visual feedback during the loading process.

Complete code