Summary

This chapter talked about how to fetch data on initial rendering and how to avoid the infinite loop when updating the state after fetching data. Throughout this chapter, we have used the Google Font API to fetch data on initial rendering with the class-based and functional component. We have also covered how to use custom hooks to share the common fetching functionality with components.

Firstly, we learned that the componentDidMount() life cycle method is the best place to fetch data upon initial rendering. Also, we learned how to use async/await with componentDidMount() and how to display the data using the map() method in the render() method.

Secondly, we used componentDidUpdate() when fetching data on updating components. We also established that updating state inside componentDidUpdate() will cause the infinite loop. To avoid this, we compared the previous prop with the current prop and updated the state only when those two prop values were different.

Thirdly...