useDeferredValue

function useDeferredValue<T>(value: T): T

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

function SearchInput({ items }: { items: string[] }) {
  const [query, setQuery] = useState('');

  // ✅ 延迟搜索查询,输入框可以立即响应
  const deferredQuery = useDeferredValue(query);

  // ✅ 基于延迟值过滤,不会阻塞输入
  const filteredItems = useMemo(() => {
    return items.filter(item =>
      item.toLowerCase().includes(deferredQuery.toLowerCase())
    );
  }, [items, deferredQuery]);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="搜索..."
        className="border p-2 rounded"
      />
      <ul className="mt-4 space-y-1">
        {filteredItems.map(item => (
          <li key={item} className="text-sm">{item}</li>
        ))}
      </ul>
    </div>
  );
}

import { useDeferredValue, memo } from 'react';

interface DataPoint {
  id: string;
  category: string;
  value: number;
  timestamp: number;
}

function Dashboard({ rawData }: { rawData: DataPoint[] }) {
  const [filters, setFilters] = useState({
    category: '',
    minValue: 0,
  });

  // ✅ 延迟过滤后的数据,控制按钮可以立即响应
  const deferredFilteredData = useDeferredValue(
    useMemo(() => {
      let result = rawData;

      if (filters.category) {
        result = result.filter(d => d.category === filters.category);
      }

      if (filters.minValue > 0) {
        result = result.filter(d => d.value >= filters.minValue);
      }

      return result;
    }, [rawData, filters])
  );

  const handleCategoryChange = (category: string) => {
    setFilters(prev => ({ ...prev, category }));
  };

  const handleMinValueChange = (minValue: number) => {
    setFilters(prev => ({ ...prev, minValue }));
  };

  return (
    <div className="p-4">
      {/* 控制面板 - 立即响应 */}
      <div className="mb-6 p-4 bg-gray-50 rounded">
        <h3 className="font-semibold mb-3">过滤器</h3>

        <div className="space-y-3">
          <div>
            <label className="block text-sm mb-1">类别</label>
            <select
              value={filters.category}
              onChange={(e) => handleCategoryChange(e.target.value)}
              className="w-full border p-2 rounded"
            >
              <option value="">全部</option>
              <option value="A">类别 A</option>
              <option value="B">类别 B</option>
              <option value="C">类别 C</option>
            </select>
          </div>

          <div>
            <label className="block text-sm mb-1">最小值</label>
            <input
              type="number"
              value={filters.minValue}
              onChange={(e) => handleMinValueChange(Number(e.target.value))}
              className="w-full border p-2 rounded"
              placeholder="输入最小值..."
            />
          </div>
        </div>
      </div>

      {/* 图表 - 延迟渲染 */}
      <ExpensiveChart data={deferredFilteredData} />
    </div>
  );
}

// ✅ 使用 memo 优化图表组件,只在 data 变化时重新渲染
const ExpensiveChart = memo(function ExpensiveChart({ data }: { data: DataPoint[] }) {
  // 假设这是一个很重的图表渲染组件
  return (
    <div className="p-4 bg-white border rounded">
      <h3 className="font-semibold mb-3">数据可视化</h3>
      <div className="h-64 flex items-center justify-center text-gray-400">
        图表区域 ({data.length} 条数据)
      </div>
    </div>
  );
});

import { useDeferredValue, memo, useState, useEffect } from 'react';

interface ProductListProps {
  products: Product[];
  sortBy: 'name' | 'price' | 'rating';
}

// 父组件 - 频繁更新
function ProductPage() {
  const [products, setProducts] = useState<Product[]>([]);
  const [sortBy, setSortBy] = useState<'name' | 'price' | 'rating'>('name');
  const [cart, setCart] = useState<CartItem[]>([]);

  // 模拟数据频繁更新(如实时数据、定时刷新)
  useEffect(() => {
    const interval = setInterval(() => {
      // 模拟数据更新
      setProducts(prev => updateProducts(prev));
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  const addToCart = (product: Product) => {
    setCart(prev => [...prev, { product, quantity: 1 }]);
  };

  return (
    <div className="p-4">
      {/* 购物车 - 立即响应用户操作 */}
      <CartSummary cart={cart} onAddToCart={addToCart} />

      {/* 排序控制 - 立即响应用户操作 */}
      <SortControl sortBy={sortBy} onSortChange={setSortBy} />

      {/* 产品列表 - 延迟渲染,因为数据频繁更新 */}
      <ProductList products={products} sortBy={sortBy} />
    </div>
  );
}

// ✅ 子组件使用延迟值
function ProductList({ products, sortBy }: ProductListProps) {
  // ✅ 延迟 products 和 sortBy,列表渲染不会阻塞购物车和排序控制
  const deferredProducts = useDeferredValue(products);
  const deferredSortBy = useDeferredValue(sortBy);

  // ✅ 基于延迟值计算排序后的列表
  const sortedProducts = useMemo(() => {
    return [...deferredProducts].sort((a, b) => {
      switch (deferredSortBy) {
        case 'name':
          return a.name.localeCompare(b.name);
        case 'price':
          return a.price - b.price;
        case 'rating':
          return b.rating - a.rating;
        default:
          return 0;
      }
    });
  }, [deferredProducts, deferredSortBy]);

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
      {sortedProducts.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// ✅ 使用 memo 优化产品卡片
const ProductCard = memo(function ProductCard({ product }: { product: Product }) {
  return (
    <div className="border rounded p-4">
      <h3 className="font-semibold">{product.name}</h3>
      <p className="text-sm text-gray-600">¥{product.price}</p>
      <p className="text-sm text-yellow-500">⭐ {product.rating}</p>
    </div>
  );
});

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

// 假设使用 react-window 或 react-virtual
import { FixedSizeList } from 'react-window';

function LargeList({ allItems }: { allItems: Item[] }) {
  const [filter, setFilter] = useState('');

  // ✅ 延迟过滤条件,列表渲染不会阻塞输入
  const deferredFilter = useDeferredValue(filter);

  // ✅ 基于延迟值过滤
  const filteredItems = useMemo(() => {
    if (!deferredFilter) return allItems;

    return allItems.filter(item =>
      item.name.toLowerCase().includes(deferredFilter.toLowerCase())
    );
  }, [allItems, deferredFilter]);

  // ✅ 渲染每一行
  const Row = ({ index, style }: { index: number; style: React.CSSProperties }) => {
    const item = filteredItems[index];

    return (
      <div style={style} className="p-2 border-b">
        {item.name} - {item.description}
      </div>
    );
  };

  return (
    <div>
      {/* 输入框 - 立即响应 */}
      <input
        type="text"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        placeholder="过滤项目..."
        className="w-full border p-2 rounded mb-4"
      />

      {/* 虚拟列表 - 延迟更新 */}
      <FixedSizeList
        height={600}
        itemCount={filteredItems.length}
        itemSize={50}
        width="100%"
      >
        {Row}
      </FixedSizeList>

      <p className="mt-2 text-sm text-gray-500">
        显示 {filteredItems.length} / {allItems.length} 条
      </p>
    </div>
  );
}

// 使用示例:假设有 100,000 条数据
const hugeList = Array.from({ length: 100000 }, (_, i) => ({
  id: i,
  name: `Item ${i}`,
  description: `Description for item ${i}`,
}));

// <LargeList allItems={hugeList} />