What are some common use cases for custom hooks in React?

What are some common use cases for custom hooks in React?

Custom hooks in React are often used for state management, data fetching, and encapsulating reusable logic.

Can you give me an example of a custom hook for data fetching?

Sure! A common custom hook for data fetching might look like this:

import { useState, useEffect } from 'react';

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

    useEffect(() => {
        fetch(url)
            .then(response => response.json())
            .then(data => {
                setData(data);
                setLoading(false);
            })
            .catch(error => {
                setError(error);
                setLoading(false);
            });
    }, [url]);

    return { data, loading, error };
}

This hook can be used to fetch data from any API.

What are the benefits of using custom hooks?

Custom hooks promote code reusability, improve readability, and help manage complex logic in a cleaner way.

Are there any performance considerations when using custom hooks?

Yes, it's important to avoid unnecessary re-renders by ensuring that hooks are used correctly and dependencies are managed.