Fetching Data from the API

Welcome to the next step in your journey of building dynamic web applications! In this lesson, we will focus on fetching data from an API and displaying it in your application. This is a crucial skill for any developer, as it allows you to interact with external data sources and bring your applications to life with real-time information. Whether you're building a simple to-do list or a complex data-driven application, understanding how to fetch and display data is essential.

In this lesson, you will learn how to use the fetch API to retrieve data from a server. We will cover the basics of making GET requests to API endpoints and handling the responses. Here's a quick look at what you'll be doing:

export const getTodos = async () => {
  const response = await fetch('http://localhost:8000/todos');
  const data = await response.json();
  return data;
};

In the code snippet above, you can see how we use the fetch function to make a GET request to the /todos endpoint. The response is then converted to JSON format, which is a common data format used in web applications. This data can then be used to update the user interface, providing users with the latest information.

To see how this data is used in a React component, let's look at the Todos component:

const Todos = () => {
  const [todos, setTodos] = useState([]);

  const fetchTodos = async () => {
    const data = await getTodos();
    setTodos(data);
  };

  useEffect(() => {
    fetchTodos();
  }, []);

  const handleDelete = (id) => {
    deleteTodo(id);
    fetchTodos();
  };

  return (
    {/* Code to show To-do items */}
  );
};

export default Todos;

In the Todos component, we use the useEffect hook to call the fetchTodos function when the component mounts. This function uses the getTodos service to fetch the list of todos from the server and updates the component's state with the fetched data. The todos should then be displayed using a component that receives each todo item as a prop.

In the Todos component, we use the useEffect hook to manage side effects in our React application. Here's the relevant part of the code:

useEffect(() => {
  fetchTodos();
}, []);

What is a "Side Effect"?

In the context of React, a "side effect" refers to any operation that affects something outside the scope of a function or component. This can include data fetching, subscriptions, or manually changing the DOM. Side effects are operations that need to happen after a component renders, but they are not directly related to rendering the UI.

React components are primarily concerned with rendering UI based on state and props. However, many applications require operations that go beyond rendering, such as fetching data from an API. The useEffect hook allows us to perform these side effects in function components.

In our Todos component, we use useEffect to call the fetchTodos function when the component mounts. The empty dependency array [] ensures that this effect runs only once, similar to componentDidMount in class components. This is crucial for fetching data when the component is first rendered, ensuring that our application has the necessary data to display to the user.

Fetching data from an API is a fundamental aspect of modern web development. It allows your application to communicate with servers, access external data, and provide users with up-to-date information. By mastering this skill, you will be able to build more interactive and responsive applications. Imagine creating a to-do list app that automatically updates with tasks from a server or a weather app that fetches real-time weather data. The possibilities are endless!