Q1. How do you make HTTP requests in React?
You can use the Fetch API or third-party libraries like Axios.
Typically, you make requests inside
Typically, you make requests inside
useEffect for data fetching on component mount, and handle loading and error states.Q2. How do you use fetch in a React component?
Example:
useEffect(() => {
fetch('https://api.example.com/data')
.then(res => res.json())
.then(data => setData(data))
.catch(err => setError(err));
}, []);
Q3. How do you handle async/await with fetch?
You can define an async function inside
Example:
useEffect and call it.Example:
useEffect(() => {
const fetchData = async () => {
try {
const res = await fetch(url);
const data = await res.json();
setData(data);
} catch (err) {
setError(err);
}
};
fetchData();
}, []);
Q4. What are loading and error states?
Loading state indicates data is being fetched, typically a boolean.
Error state holds any error message.
You conditionally render based on these states to show spinners or error messages.
Error state holds any error message.
You conditionally render based on these states to show spinners or error messages.
Q5. How do you cancel a fetch request when component unmounts?
You can use
Create a signal and pass it to fetch.
In the cleanup of
AbortController.Create a signal and pass it to fetch.
In the cleanup of
useEffect, call abortController.abort() to cancel the request.