What is the difference between hooks and custom hooks in React?

What is the difference between hooks and custom hooks in React?

In React, hooks are built-in functions like useState and useEffect that allow you to use state and lifecycle features in functional components. Custom hooks, on the other hand, are user-defined functions that leverage these built-in hooks to encapsulate and reuse stateful 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 };
}

How do I use this custom hook in a component?

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

function App() {
    const { data, loading } = useFetch('https://api.example.com/data');

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

Are there any limitations to using custom hooks?

Custom hooks can only be used in functional components and must follow the rules of hooks, such as being called at the top level of the component. They also can't be used conditionally.