React — 通用hooks封裝

1.UseLocalStorage：該 Hook 用於在本地儲存中儲存和檢索資料。在元件之間共享和保持狀態，並且在頁面重新載入時保持資料的永續性。

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 {
            setStoredValue(value);
            window.localStorage.setItem(key, JSON.stringify(value));
        } catch (error) {
            console.error(error);
        }
    };

    return [storedValue, setValue];
};

export default useLocalStorage;

2.UseFetch：這個 Hook 用於進行網路請求並獲取資料。在元件中發起非同步請求，並管理資料的載入狀態，使得處理網路請求變得更加簡單和方便。

import { useState, useEffect } from 'react';

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

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                const result = await response.json();
                setData(result);
                setLoading(false);
            } catch (error) {
                console.error(error);
                setLoading(false);
            }
        };

        fetchData();

    }, [url]);

    return { data, loading };
};

export default useFetch;

3.UseDebounce：此 Hook 用於延遲某個值的更新，通常用於處理使用者輸入的延遲搜尋或其他需要防抖的場景。它可以幫助減少不必要的請求或計算，提高效能並提升使用者體驗。

import { useState, useEffect } from 'react';

const useDebounce = (value, delay) => {
    const [debouncedValue, setDebouncedValue] = useState(value);

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        return () => {
            clearTimeout(handler);
        };
    }, [value, delay]);

    return debouncedValue;
};

export default useDebounce;