Course Content
Expert React
Expert React
4. Formik
6. Next Steps
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 thelazy
function. Thelazy
function takes a function as an argument, which returns a dynamic import statement. The import statement asynchronously imports theView.js
file/module. The relative path (./View.js
) specifies the file to import. By wrapping the import statement withlazy
, we enable lazy loading of theView.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 afallback
prop. In this case, thefallback
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
Everything was clear?