How to Load React Components to your App?
As you know, React is a Javascript framework that supports its architecture based on components, and is used to build the front-end in our apps. Although what supports the entire app are the parts that make up these components and their relationships, in this tutorial, we will focus on the loading of those components when the application is running.
But, why is the loading of these components important? Well, the most significant reason is that the loading speed of the components can significantly affect the user experience with your application.
For example, when you enter a web address, and it takes more than 15 seconds to show something other than the white background, the usual reaction is to refresh the site. As developers, we know refreshing is the solution to a lot of problems. However, in this case, the app just needed a few more seconds, and you did not give it the opportunity to finish loading, dismissing the product you had.
This is because, at the beginning of the development of your app, you have a small environment that can be tested quickly. As the product grows, it becomes more complex to compile all that code into a small file.
Here is an example of how to optimize the loading of the components of an application: This app is used to manage a supermarket.
When you think about how to bring components into the app, the usual way is to import each component into your routes.
At the beginning, when compiling your app, you will realize there is no major problem with file sizes, but as the app grows and grows, you have to import each main component that you create. This is the traditional way to load the components. But this method has an issue, importing the components this way forces the application to load all of them the moment it starts.
When you use the router within the app, you will only see one component, depending on the URL. Then, why should you wait for all the components to load, if only one is on display at that time? React developers thought about this impediment and decided to give us a hand: 'Lazy Import.'
As its name implies, 'Lazy Import' does not load all components at once, only the immediately necessary one, making the app load much faster.
In our example code, it looks like this:
With this, you import the components in a way that they only load when they are needed.
However, a question arises: What would we show while loading that first component? The React developers give us the option to add a previous block, called 'Suspense.' This block allows us to render a view while loading the first component.
Our advice is to use it to inform the user that you are uploading the content. Any kind of 'Loader' should do the job.
It's important to remember that you must use 'Suspense' when importing components with 'Lazy Import', otherwise, you will have nothing to show while the app loads, and it will generate an error.
Now, our main code looks like this:
Now, the loader code:
This is a simple and nice way to help us improve the user experience from the moment they are loading the page. It is important to remember to start implementing it from the beginning of the product development, it will also accelerate the compilation time of your app.
While this solution is very useful and can be considered a good React programming practice, it is not always necessary. Some components lose their value if all of their internal components have not been loaded correctly. In these cases, it is better to implement the traditional way, even if the load takes a little longer.
It is up to you to decide when it is worth making these changes!
