React搜索新结果加载前闪现旧结果致UI闪烁问题求解

出现旧结果闪现、UI高度跳动的核心原因有两点：

• 清空输入框时直接执行fetcher.data = undefined属于非响应式赋值，不会触发React重渲染，上一次搜索的返回数据会一直残留在fetcher实例中
• 触发新搜索时，setSearch(value)是同步执行立刻更新状态的，此时search.length > 0的渲染条件已经满足，但fetcher.load()是异步请求，在请求返回的窗口期内，fetcher.data还是残留的旧值，会被直接渲染到页面上；等新请求返回后旧结果被替换为新内容，前后渲染内容高度不一致就会产生跳动。

1. 发起新请求前同步清空响应式结果 #

不要直接依赖fetcher实例上的非响应式data字段，单独用React state管理搜索结果，发起新搜索、清空输入框的第一时间就把结果状态置空，从根源阻断旧值被渲染的路径，同时补充竞态处理避免慢请求覆盖新结果：

import { useState, useRef } from 'react';

const [search, setSearch] = useState('');
// 单独管理响应式搜索结果
const [searchResult, setSearchResult] = useState<any[] | undefined>(undefined);
// 存最新搜索词做竞态判断
const latestSearchRef = useRef('');

const handleSearch = async (value: string) => {
  latestSearchRef.current = value;
  if (value === "") {
    setSearch("");
    setSearchResult(undefined);
    return;
  }
  setSearch(value);
  // 发起请求前立刻清空旧结果，避免旧值闪现
  setSearchResult(undefined);
  const res = await fetcher.load(`/query?q=${value}`);
  // 只处理最新一次请求的返回结果
  if (value === latestSearchRef.current) {
    setSearchResult(res);
  }
};

// 渲染逻辑替换为传入响应式的searchResult
{search.length > 0 && <Search result={searchResult} />}

2. 增加加载态占位避免高度跳变 #

在请求等待期不要留空，渲染固定高度的加载提示，同时给结果容器设置最小高度，保证加载态、结果列表、无结果提示三种状态下的容器高度基本一致，彻底消除UI跳动：

const Search: React.FC<SearchProps> = ({ result, loading }) => {
  return (
    // 给结果容器设置最小高度，避免内容切换时高度突变
    <ul style={{ minHeight: '300px' }}>
      {loading ? (
        <p>搜索中...</p>
      ) : result && result.length > 0 ? (
        result.map(({ name, id }) => (
          <Link to={`/characters/${id}`} key={id}>
            <li>{name}</li>
          </Link>
        ))
      ) : (
        <p>No matches found :(</p>
      )}
    </ul>
  );
};

如果使用的是React Router自带的useFetcher，可以直接用fetcher内置的状态字段判断加载态，不需要额外维护loading变量：

{search.length > 0 && (
  <Search 
    result={fetcher.data} 
    loading={fetcher.state === 'loading'} 
  />
)}

3. 禁止非预期的实例属性修改 #

不要直接手动修改fetcher实例上的data属性，这类脱离React状态管理的赋值不会触发视图更新，是旧数据残留的核心诱因，所有视图相关的数据都要通过React state或者官方提供的状态字段管理。

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