What are some common custom hooks in React?

What are some common custom hooks in React?

Some common custom hooks in React include useFetch, useLocalStorage, and useForm. Would you like to know more about any of these?

Can you explain how to create a useFetch hook?

Sure! The useFetch hook can be created using the useState and useEffect hooks to fetch data from an API. Here's a simple example:

import { useState, useEffect } from 'react';

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 result = await response.json();
                setData(result);
            } catch (error) {
                setError(error);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, [url]);

    return { data, loading, error };
};

This hook will return the fetched data, loading state, and any error that occurs.

What about useLocalStorage? How does that work?

The useLocalStorage hook allows you to easily manage state that persists in the browser's local storage. Here's a basic implementation:

import { useState } from 'react';

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];
};

This hook allows you to get and set values in local storage seamlessly.