React中useEffect如何仅在页面加载及搜索词变化时调用API

现有代码冗余引入了count作为中间触发状态，形成了「streamSearchText变化 → count更新 → 接口调用」的多余依赖链：组件首次挂载时count初始值为0，会直接触发第一次接口调用；后续streamSearchText变化时又会通过修改count触发第二次调用，本质是接口触发逻辑没有和实际依赖源对齐。

直接移除冗余的count状态，将接口调用逻辑和防抖逻辑按触发场景拆分即可：

import { useState, useEffect, useRef } from 'react';

const [streamSearchText, setStreamSearchText] = useState("");
// 新增ref标记首次加载状态
const isFirstLoad = useRef(true);

// 空依赖数组：仅在组件首次挂载时执行一次，调用接口
useEffect(() => {
  videoGridState();
  isFirstLoad.current = false;
}, []);

// 依赖streamSearchText：仅在搜索词变化时，防抖触发接口调用
useEffect(() => {
  // 首次加载时已经调用过接口，直接跳过本次执行避免重复触发
  if (isFirstLoad.current) return;

  const delayDebounceFn = setTimeout(() => {
    videoGridState();
  }, 1000);

  return () => clearTimeout(delayDebounceFn);
}, [streamSearchText]);

逻辑说明 #

• 空依赖数组的useEffect只会在组件完成首次挂载后执行1次，完全匹配首屏仅调用一次接口的需求
• useRef标记的isFirstLoad不会触发组件重渲染，用来拦截第二个useEffect在组件初始化阶段因为streamSearchText初始值触发的多余执行
• 防抖逻辑保留原有1秒延迟设计，搜索词连续变化时会自动清除上一次的定时器，避免频繁发请求
• 如果需要支持清空搜索词（即streamSearchText为空字符串）时重新拉取全量列表，该写法也可以直接兼容，不需要额外修改判断逻辑

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