**Using useEffect for API Calls** In the previous topics, we've established a solid foundation for building modern user interfaces with React.js. Now, let's dive into one of the most critical aspects of React development: integrating RESTful APIs and fetching data asynchronously. In this topic, we'll explore the `useEffect` hook and its role in making API calls. **What is useEffect?** `useEffect` is a React hook that allows you to run side effects, such as making API calls, in your functional components. Side effects are operations that can't be performed during the render phase of a component, such as fetching data from an API or interacting with the browser's DOM. **When to use useEffect** Use `useEffect` whenever your component depends on some external state or props, or when you need to perform an operation that affects the component's state or DOM. **Using useEffect for API Calls** To fetch data from an API, you'll typically use the `fetch` API or a library like Axios. Here's an example of using `useEffect` to make a GET request: ```jsx import React, { useState, useEffect } from 'react'; function UserProfile() { const [user, setUser] = useState(null); useEffect(() => { const fetchUserData = async () => { const response = await fetch('https://api.example.com/user'); const data = await response.json(); setUser(data); }; fetchUserData(); }, []); // empty dependency array means this effect runs only once if (!user) return <div>Loading...</div>; return ( <div> <h1>{user.name}</h1> <p>{user.email}</p> </div> ); } ``` In this example, `fetchUserData` is a function that makes a GET request to the API and updates the `user` state variable when the response is received. The `useEffect` hook ensures that the `fetchUserData` function is called only once, when the component mounts. **Dependencies** One of the key features of `useEffect` is the ability to specify a dependency array. This array defines which variables should trigger the effect to run. When any dependency changes, the effect will be re-run. For example, if you want to fetch data when the user logs in, you could use the `useEffect` hook like this: ```jsx useEffect(() => { const fetchUserData = async () => { const response = await fetch('https://api.example.com/user'); const data = await response.json(); setUser(data); }; fetchUserData(); }, [loginUser, setUser]); // depend on these two variables ``` **Retry and cancellation** `useEffect` also provides ways to handle retrying and cancellation of API calls. For example, you can use the `retryDelay` option to specify a delay between retries: ```jsx useEffect(() => { const fetchUserData = async () => { const response = await fetch('https://api.example.com/user', { retryDelay: 1000, // retry after 1 second }); const data = await response.json(); setUser(data); }; fetchUserData(); }, []); ``` You can also use the `cancelriere` option to cancel an ongoing request when the component unmounts: ```jsx useEffect(() => { const fetchUserData = async () => { const response = await fetch('https://api.example.com/user', { cancelriere: true, // enable cancellation }); const data = await response.json(); setUser(data); }; fetchUserData(); }, []); ``` **Best practices** Here are some best practices to keep in mind when using `useEffect` for API calls: * Only update state within the effect function * Avoid updating state or subsdribing to state within the effect function * Avoid using `useEffect` to update props or render DOM elements * Use a dependency array to specify which variables should trigger the effect * Handle errors and cancellations within the effect function **Takeaways** * `useEffect` is a powerful hook for making API calls and handling side effects in React components * Use `useEffect` when your component depends on external state or props * Specify a dependency array to ensure the effect runs only when necessary * Handle errors and cancellations within the effect function **Exercise** Implement the `useEffect` hook to fetch data from a sample API and display the response in a React component. **Text:** [Advanced React Functionals - useEffect](https://reactjs.org/docs/hooks-effect.html) **Code snippet:** [React docs: Using `useEffect`](https://dev.to/top.ParamuG/web-development-with-react-useeffect-3e48) *Write a comment below with any questions or need help with the previously assigned topics, answering them then and we can move on to the next topic.*