Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

import { useState, useEffect } from 'react';

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

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

return [storedValue, setValue];
}

// ── useDebounce ────────────────────────────────────────────────────────────
function useDebounce(value, delay = 300) {
    const [debounced, setDebounced] = useState(value);

useEffect(() => {
        const timer = setTimeout(() => setDebounced(value), delay);
        return () => clearTimeout(timer);
    }, [value, delay]);

return debounced;
}

// ── Usage ──────────────────────────────────────────────────────────────────
function SearchBox() {
    const [query, setQuery] = useLocalStorage('lastQuery', '');
    const debouncedQuery    = useDebounce(query, 400);

useEffect(() => {
        if (debouncedQuery) {
            console.log('Searching for:', debouncedQuery);
        }
    }, [debouncedQuery]);

return (
        <input
            value={query}
            onChange={e => setQuery(e.target.value)}
            placeholder="Search…"
        />
    );
}