Twirl Modularity with Lazy loading
understanding of Reactjs lazy loading and its use to achieve modular level routing
Code reusability and code separation are some of the most important aspects of any application. With this in mind, we can separate and write reusable code through multiple ways to React, E.g.,
- Separate Component
2. Separate Module
With reusability and separation, there is one more important aspect we should be kept in our minds while writing our program. It is the Performance of the application. The performance of any application can easily be defined by its initial loading time or it is directly proportional to chunks of code that are loaded at the time when the application starts. With each component and module, there comes a chunk of code that is loaded.
Also with the routing for every component or module, a specific chunk of code is loaded in the browser. we can see these chunks' size and the time they took which they took to load in our application via the network tab in the developers' tool. These chunks of code that were loaded initially should be small and the time taken to load should be as minimum as possible. To achieve this We need to load only those components/modules which are absolutely necessary at the time of loading of the application.
How to achieve lazy loading in Reactjs?
React.lazy function allows us to render the import statement dynamically in our application.
In the Below code example, we are importing About Component using the lazy method. It will load the bundle containing by about component when this component will be first rendered.
The lazy() method takes a function that must call the import() method dynamically. The return type of this method is Promise which will be resolved to a module with an export default that contains the React component.
The Lazy loaded about component needs to be rendered inside the Suspense method which will allow some fallback content or UI to load while waiting for the component to load. As in the above example, we are using fallback UI as a loader component.
Module-based code separation with lazy-loaded Route
There can be multiple modules in the application. In every module, there can be multiple routes in it. We can make those routes to load lazily which are not needed at the time of application start. Let us understand this by an example.
In the above code snippet, we are defining the route for the about component which will be lazily loaded, and then we are using that route and exporting it via AboutModule.
In the above code snippet, we are defining the todo route and then exporting it via TodoModule.
In the above code snippet, we are using the default route as / which will load the todo component as default. About Component will be loaded lazily whenever we go to /about. When we go to any route which is not covered in any module, then we will be redirected to /404-page component.
Conclusion
With the above techniques, we can improve our application performance and can implement the best coding practices.
“Write code that is easy to delete, not easy to extend”
— Tef, Programming is Terrible
