What are the differences between React hooks and custom hooks?

What are the differences between React hooks and custom hooks?

React hooks are built-in functions like useState and useEffect that allow you to manage state and side effects in functional components. Custom hooks, on the other hand, are user-defined functions that leverage React hooks to encapsulate reusable logic.

Can you give me an example of a custom hook?

Sure! A simple custom hook could be useFetch, which fetches data from an API. It might look like this:

import { useState, useEffect } from 'react';

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

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

    return { data, loading };
}

When should I use custom hooks instead of built-in hooks?

You should use custom hooks when you have reusable logic that needs to be shared across multiple components. They help keep your components clean and maintainable.

Are there any performance implications of using custom hooks?

Generally, custom hooks do not have significant performance implications if used correctly. However, be mindful of how often they re-render components and ensure that you manage state efficiently.