What are some examples of custom hooks in React?

What are some examples of custom hooks in React?

Custom hooks in React are functions that allow you to reuse stateful logic. For example, you can create a useFetch hook to handle API calls.

Can you show me how to implement a useFetch hook?

Sure! Here's a simple implementation:

import { useState, useEffect } from 'react';

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

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

    return { data, loading, error };
};

This hook fetches data from a given URL and returns the data, loading state, and any error.

How can I use this useFetch hook in a component?

You can use the useFetch hook in a component like this:

const MyComponent = () => {
    const { data, loading, error } = useFetch('https://api.example.com/data');

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return <div>{JSON.stringify(data)}</div>;
};