What are the differences between hooks and custom hooks in React?

What are the differences 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 decide when to use a custom hook?

You should consider using a custom hook when you find yourself repeating the same logic across multiple components. It helps keep your code DRY (Don't Repeat Yourself) and makes it easier to manage stateful logic.

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 dependencies properly in useEffect to avoid unnecessary renders.