⏳ Bài 14: useTransition & useDeferredValue

import { useState, useTransition } from 'react';

function SearchPage() {
    const [query, setQuery] = useState('');
    const [results, setResults] = useState([]);
    const [isPending, startTransition] = useTransition();

    const handleSearch = (e) => {
        const value = e.target.value;
        // Cập nhật input NGAY LẬP TỨC (khẩn cấp)
        setQuery(value);

        // Cập nhật results TRỄ hơn (không khẩn cấp)
        startTransition(() => {
            const filtered = heavySearch(value); // Tính toán nặng
            setResults(filtered);
        });
    };

    return (
        <div>
            <input value={query} onChange={handleSearch} placeholder="Tìm kiếm..." />
            {isPending && <p>Đang tìm...</p>}
            <ul>
                {results.map(r => <li key={r.id}>{r.name}</li>)}
            </ul>
        </div>
    );
}

import { useState, useDeferredValue, useMemo } from 'react';

function FilteredList({ items }) {
    const [filter, setFilter] = useState('');
    const deferredFilter = useDeferredValue(filter);

    // useMemo + deferredValue: list cập nhật trễ, input mượt
    const filteredItems = useMemo(() => {
        return items.filter(item =>
            item.name.toLowerCase().includes(deferredFilter.toLowerCase())
        );
    }, [items, deferredFilter]);

    const isStale = filter !== deferredFilter;

    return (
        <div>
            <input
                value={filter}
                onChange={e => setFilter(e.target.value)}
                placeholder="Filter..."
            />
            <div style={{ opacity: isStale ? 0.5 : 1 }}>
                {filteredItems.map(item => (
                    <div key={item.id}>{item.name}</div>
                ))}
            </div>
        </div>
    );
}