Introduction

In the previous chapter, we learned how to fetch data from servers using async/await and catch errors with the try/catch pattern. Also, we have further practiced how to use the async/await methods inside loops.

Now, let's consider a scenario. If you visit any of the popular social media sites, such as Instagram or Twitter, you get photos and content upon initial rendering of the web page and user interaction, such as clicking on a button or submitting a form, isn't necessary. In such a business use case, it is very common for an app to display content on initial rendering without any user interaction. In this chapter, we will look at the best way to fetch data upon initial rendering of a class-based component and how to achieve the same with a functional component.

Furthermore, for such scenarios, while fetching data from the server, we may encounter an issue with the component falling into an infinite loop due to re-rendering of the component. An example...