Understanding Data Fetching using the useEffect Hook

A component's main job is to calculate JSX from its props and state. Anything else it does that reaches outside that calculation, such as requesting data from a server, starting a timer, or changing the page title, is called a side effect. Data fetching is the side effect most applications need first: the component appears, asks a server for data, and shows the data when it arrives.

The data can come from many places. A library app shows a list of books from its database, a weather widget shows readings from an online service, and a profile page shows user details from an API