useFetcher调用为何触发React组件无限重渲染循环

这个无限重渲染循环和你的防抖逻辑、useMemo计算、urlText状态更新没有任何关系，核心问题是useFetcher的默认使用方式存在实例不稳定的问题：

• 如果你调用useFetcher()时不传入固定key，每次组件重渲染，React Router都会生成一个绑定了全新上下文的fetcher实例
• 你在useEffect里调用fetcher.load()后，fetcher内部状态会经历idle → loading → idle的变更，每次状态变更都会触发组件重渲染
• 重渲染生成的新fetcher实例会和useEffect的闭包、状态更新形成循环：effect执行调用load → load改状态触发重渲染 → 重渲染拿到新fetcher后effect被意外触发 → 再次调用load，最终触发React的无限重渲染告警。

你写的!fetcher判断完全没用，useFetcher在组件生命周期内始终返回合法的fetcher对象，永远不会是null/undefined，这个判断拦不住任何逻辑。

按以下步骤调整即可解决：

• 给useFetcher传入固定的唯一key，保证fetcher实例在多次重渲染之间引用稳定，不会凭空生成新实例

// key可以自定义，只要当前组件内唯一即可
const fetcher = useFetcher({ key: 'preview-url-fetcher' });

• 给useEffect补上fetcher依赖，符合React Hook的依赖规则，避免闭包引用旧的fetcher实例
• 增加重复请求拦截逻辑：如果当前fetcher正处于加载状态，或者已经加载过当前目标URL的结果，就跳过load调用，既避免无效请求，也阻断重复触发渲染的可能

对应你最开始的简化版代码，改完的useEffect如下：

useEffect(() => {
  if (urlText === "") return;
  // 加载中不重复发请求
  if (fetcher.state === "loading") return;

  const targetApi = `/api/preview?url=${encodeURIComponent(urlText)}`;
  // 已经加载过当前地址的结果就跳过
  if (fetcher.data?.requestUrl === targetApi) return;

  fetcher.load(targetApi);
}, [urlText, fetcher]);

对应你贴的完整版带防抖的代码，调整逻辑一致即可：

const fetcher = useFetcher({ key: 'preview-url-fetcher' });

useEffect(() => {
  if (url === null) return;
  if (fetcher.state === "loading") return;

  const targetApi = `/api/preview?url=${encodeURIComponent(url.toString())}`;
  if (fetcher.data?.requestUrl === targetApi) return;

  fetcher.load(targetApi);
}, [debouncedUrl, fetcher]);

小提示：如果你需要在fetcher.data里拿到请求的URL，只需要在/api/preview接口的返回结果里把当前请求的url带回来即可，方便前端做重复请求判断。

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