What are some examples of custom hooks in React 18?

What are some examples of custom hooks in React 18?

Custom hooks in React 18 allow you to extract component logic into reusable functions. For example, you can create a useFetch hook to handle data fetching.

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 };
};

You can use this hook in your components to fetch data easily!

What other custom hooks can I create?

You can create various custom hooks like useLocalStorage for managing local storage, useDebounce for debouncing input, or usePrevious to track the previous value of a state.