如何优化防抖搜索速度？React防抖搜索卡顿问题排查

• 防抖函数完全失效：你在组件内部直接声明handleSearch = debounce(updateQuery, 100)，组件每次渲染都会重新生成一个全新的防抖函数实例。这意味着输入每一个字符都会触发setQuery，根本起不到“延迟合并请求”的作用，组件会频繁重渲染、反复执行过滤逻辑，自然出现卡顿。
• 过滤逻辑无缓存：filteredNotes = getFilteredNotes(notesList, query)在组件每次渲染时都会执行，哪怕notesList和query都没有变化，也会重新遍历整个列表做过滤，浪费大量计算资源。
• 用索引作为key：列表渲染时使用idx作为key，当列表项增删或顺序变动时，React会错误地复用组件，引发不必要的重渲染，进一步加剧卡顿。

import React, { useState, useCallback, useMemo } from 'react';

// 把防抖函数抽离到组件外部，避免每次渲染重新创建
const debounce = (func: (...args: any[]) => void, delay: number) => {
  let timeoutId: NodeJS.Timeout;
  return (...args: any[]) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), delay);
  };
};

export const App = () => {
  const [notesList, setNotesList] = useState<string[]>([]);
  const [query, setQuery] = useState<string>("");

  // 用useCallback包裹updateQuery，确保函数引用稳定
  const updateQuery = useCallback((str: string) => {
    setQuery(str);
  }, []);

  // 用useMemo缓存防抖函数，保证组件渲染时不会重新生成
  const handleSearch = useMemo(() => debounce(updateQuery, 150), [updateQuery]);

  // 用useMemo缓存过滤结果，仅当依赖项变化时重新计算
  const filteredNotes = useMemo(() => {
    if (!query) {
      return notesList;
    }
    // 可选：转为小写实现不区分大小写的搜索
    const lowerQuery = query.toLowerCase();
    return notesList.filter(note => note.toLowerCase().includes(lowerQuery));
  }, [notesList, query]);

  // 假设addNote、updateNote、deleteNote、toggleSidePanel等函数已实现
  // 注意这些函数也建议用useCallback包裹，避免传递给子组件时触发不必要重渲染

  return (
    <div>
      <GlobalStyle />
      <SidePanel showSidePanel={showSidePanel}>
        <Input value={query} onChange={(e) => handleSearch(e.target.value)} />
        <Button onClick={addNote}>Add note</Button>
        {filteredNotes.map((note: string) =>
          {/* 优先用笔记内容（确保唯一）或专属ID作为key，避免用索引 */}
          <Note
            onChange={updateNote}
            remove={deleteNote}
            text={note}
            key={note}
          />
        )}
      </SidePanel>
      <ToggleButton onClick={toggleSidePanel}>Open</ToggleButton>
    </div>
  );
};

• 如果笔记数量极大（比如上万条），可以考虑将过滤逻辑放到Web Worker中执行，避免阻塞主线程；
• 可以给输入框添加最小长度判断，比如输入字符少于2个时不触发过滤，进一步减少计算量。

内容的提问来源于stack exchange，提问作者agobago