Several ways to handle request side effect that you should know

#react #hooks #webdev #javascript

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();
}, [])