How do I use useEffect in custom hooks?

How do I use useEffect in custom hooks?

You can use useEffect in custom hooks just like you do in functional components. It allows you to perform side effects.

Can you give me an example of a custom hook that uses useEffect?

Sure! Here's a simple example:

import { useEffect, useState } from 'react';

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(url);
            const result = await response.json();
            setData(result);
            setLoading(false);
        };
        fetchData();
    }, [url]);

    return { data, loading };
}

This custom hook fetches data from a given URL.

What happens if I don't include the dependency array?

If you don't include the dependency array, useEffect will run after every render, which can lead to performance issues.

How can I optimize the useEffect in my custom hook?

You can optimize it by carefully managing the dependency array and ensuring that you only include necessary dependencies.