In React, useEffect is commonly used to handle side effect, including handle request side effects.
However, when it comes to handling requests, it's common to use async/await, but passing an async function as the first argument of useEffect will result in an error.
This is because useEffect expects a function that returns void, but async functions return a promise.
Therefore, there are several ways to handle request side effects without errors that you should know.
1. use an async function expression
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const result = await fetch(
'YOUR_URL_HERE'
);
setData(result.data);
}
fetchData();
}, []);
You can also abstract the function expression into a useCallback hook outside the useEffect so that you can use it in other places:
const [data, setData] = useState(null);
// useCallback can accept an async function as its argument
const fetchData = useCallback(async () => {
const result = await fetch(
'YOUR_URL_HERE'
);
setData(result.data);
}, [])
useEffect(() => {
fetchData()
}, [fetchData])
2. use an IIFE
const [data, setData] = useState(null);
useEffect(() => {
(async () => {
const result = await fetch(
'YOUR_URL_HERE'
);
setData(result.data);
})()
}, [])
3. use Promise.then
const [data, setData] = useState(null);
useEffect(() => {
fetch( 'YOUR_URL_HERE')
.then(result => setData(result.data));
}, [])
4. use function declaration
const [data, setData] = useState(null);
useEffect(() => {
async function fetchData() {
const result = await fetch(
'YOUR_URL_HERE'
);
setData(result.data);
}
fetchData();
}, [])
Also, you can abstract this function declaration into a useCallback hook outside the useEffect so that you can use it in other places.
Hope these ways can work for you. :)
Top comments (0)