Hello! Today, we're going to uncover how web apps fetch data using APIs and the Fetch API in React. APIs retrieve data from systems, much like asking a waiter for takeout, while the Fetch API, a promise-based mechanism, initiates network requests, similar to dialing for a delivery.

In essence, APIs act as messengers. They transport your request to a system and deliver the data you have ordered, much like how ordering a pizza over the phone works.

# Requesting weather data from the WeatherAPI - it's as simple as making a call!
fetch('https://api.weatherapi.com/v1/current.json?q=Rome')

The Fetch API requests data and then processes it when it arrives, similar to awaiting your pizza delivery.

fetch('https://api.weatherapi.com/v1/current.json?q=Rome')
  .then(response => response.json())
  .then(data => console.log(data));

This process requests data from an API and converts it into a usable format — JSON.

Now, let's see how React, which uses components to divide the UI, utilizes the Fetch API. In functional components, the useState hook manages the data, often displaying a "Loading…" message while the data is being fetched.

function WeatherComponent() {
  const [loading, setLoading] = useState(true);
  const [weatherData, setWeatherData] = useState(null);
  useEffect(() => {
    fetch('https://api.weatherapi.com/v1/current.json?q=Rome')
      .then(response => response.json())
      .then(data => {
        setWeatherData(data);
        setLoading(false);
      });
  }, [])
  if (loading) {
    return <p>Loading...</p>;
  }
  return (<div>
      <h1>Weather in {weatherData.location.name}</h1>
      <p>{weatherData.current.condition.text}</p>
    </div>
  )
}
export default WeatherComponent;

The useEffect hook performs operations, such as fetching data, which cannot be done during rendering.

Once the data has been fetched, it is stored in the weatherData state variable. A "Loading…" message is displayed until the data has been fetched; afterward, the data is shown. This check ensures that the data is displayed only once it has been fetched and is ready to be viewed.