Custom Hooks in React: A Complete Guide

React has revolutionized the way we build user interfaces, primarily through its component-based architecture. One aspect that enhances the reusability of code within React components is the concept of Hooks. React provides several built-in Hooks, such as useState and useEffect, but sometimes the built-in options don’t quite fit your needs. This is where Custom Hooks come into play.

What are Custom Hooks?

Custom Hooks are JavaScript functions that utilize React’s built-in Hooks to encapsulate logic and stateful behavior that can be reused across components. By extracting reusable logic into Custom Hooks, you can keep your components clean and focused on rendering UI rather than managing state or side effects.

To create a Custom Hook, you only need to follow a simple convention: name your function starting with “use”.

Why Use Custom Hooks?

There are several compelling reasons to use Custom Hooks:

• Reusability: Write once, use everywhere. You can extract logic into a Custom Hook and reuse it across multiple components.
• Separation of Concerns: By separating the logic from the UI, you make your codebase easier to manage and understand.
• Readability: When you extract complex logic into a Hook, your component code becomes cleaner and easier to read.

Creating a Simple Custom Hook

Let’s start by creating a simple Custom Hook that manages the local storage state of an item. This hook will synchronize its internal state with the local storage so that even if the user refreshes the page, the data persists.

const useLocalStorage = (key, initialValue) => {
    const [storedValue, setStoredValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            console.error(error);
            return initialValue;
        }
    });

    const setValue = (value) => {
        try {
            const valueToStore = value instanceof Function ? value(storedValue) : value;
            setStoredValue(valueToStore);
            window.localStorage.setItem(key, JSON.stringify(valueToStore));
        } catch (error) {
            console.error(error);
        }
    };

    return [storedValue, setValue];
};

Using the Custom Hook

Now that we have our Custom Hook, let’s see how to use it in a functional component:

const MyComponent = () => {
    const [name, setName] = useLocalStorage('name', '');

// Handler to update the name
    const handleChange = (event) => {
        setName(event.target.value);
    };

    return (
        <div>
            <input type="text" value={name} onChange={handleChange} />
            <p>Saved Name: {name}</p>
        </div>
    );
};

Custom Hook with API Requests

Let’s create a more complex Custom Hook to manage API requests. This hook will handle fetching data, loading states, and error handling.

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);
                if (!response.ok) throw new Error('Network response was not ok');
                const data = await response.json();
                setData(data);
            } catch (error) {
                setError(error);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, [url]);

    return { data, loading, error };
};

Using the useFetch Hook

The useFetch hook can be used in a similar manner:

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

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error: {error.message}</p>;

    return (
        <div>
            <h1>Fetched Data</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};

Best Practices for Custom Hooks

When creating Custom Hooks, it’s essential to follow these best practices to ensure maintainability and performance:

• Do Not Call Hooks Conditionally: Always call Hooks at the top level of your function. This ensures that React can preserve the Hook’s state across renders.
• Use Descriptive Names: Name your Custom Hooks based on their functionality. For example, useFetch for data fetching and useLocalStorage for local storage management.
• Keep Hooks Focused: Each Custom Hook should generally have one responsibility. If it starts to grow too complex, consider breaking it into multiple Hooks.

Common Use Cases for Custom Hooks

Here are some common scenarios where Custom Hooks shine:

• Form Management: Create hooks that manage form states, validation, and submission handlers.
• Data Fetching: Encapsulate data fetching logic to make your components cleaner and more focused.
• Animation Control: Manage complex animations, transitions, or transformations.
• Event Listening: Create hooks to listen to specific window or document events.

Error Handling in Custom Hooks

Implementing error handling directly inside your Custom Hooks ensures robust applications. You can create an error state, log errors, or even trigger UI changes based on errors experienced during API calls or events.

const useFetchWithErrorHandling = (url) => {
    // ... previous implementation ...
    const logErrorToService = (error) => {
        // Custom logging service
    };

    useEffect(() => {
        // ... fetchData function ...
            catch (error) {
                setError(error);
                logErrorToService(error); // Log the error for further analysis
            }
    }, [url]);

    return { data, loading, error };
};

Testing Custom Hooks

Writing tests for your Custom Hooks is crucial for maintaining the code quality and ensuring they’re functioning as expected. You can use React Testing Library with Jest to test your hooks effectively.

import { renderHook, act } from '@testing-library/react-hooks';
import { useLocalStorage } from './useLocalStorage';

test('should store and retrieve value from localStorage', () => {
    const { result } = renderHook(() => useLocalStorage('testKey', 'initial'));

    expect(result.current[0]).toBe('initial');

    act(() => {
        result.current[1]('newValue');
    });

    expect(result.current[0]).toBe('newValue');
});

Conclusion

Custom Hooks are a powerful feature in React that enhances code reusability, maintainability, and readability. By creating Custom Hooks for your stateful logic, you can keep your components clean and focused while managing complex behaviors in a reusable manner.

As you continue building applications with React, keep expanding your library of Custom Hooks to meet your application needs and improve your development workflow.

Happy Coding!