Next.js中useEffect依赖searchParams触发两次的原因排查

问题描述 #

我编写了如下Next.js代码：

useEffect(() => {
    doSearch();
    console.log(searchParams);
}, [searchParams]);

其中doSearch函数因useEffect触发两次而执行两次，我确认并未修改searchParams。组件完整代码如下：

export default function SearchComponent({ params, searchParams }) {
  useEffect(() => {
    doSearch();
    console.log(searchParams); // 两次触发时所有参数都可用，无法在此步骤校验参数差异
  }, [searchParams]);

  const doSearch = () => {// 一些操作}
}

两次触发时searchParams均完整可用，无法在此步骤校验参数，请问为何useEffect会触发两次？

核心原因 #

1. 开发环境下的React严格模式

Next.js在开发模式默认启用React严格模式（Strict Mode），它会刻意重复执行组件挂载逻辑、副作用函数（包括useEffect），目的是提前暴露潜在问题，比如未正确清理的订阅、重复执行导致的逻辑错误等。这种重复执行是开发环境专属行为，生产环境会自动消失。

2. searchParams的引用变化

即使searchParams内容完全一致，它也可能是每次渲染时生成的新对象实例。React对useEffect的依赖采用浅比较，只要引用地址不同，就会判定依赖变化，从而触发副作用。比如路由跳转后返回、组件重新渲染时，框架可能生成新的searchParams对象，内容和之前一致但引用不同，就会导致useEffect再次执行。

解决办法 #

针对严格模式

如果只是开发环境的调试困扰，无需特殊处理，生产环境会自动恢复正常；若想临时关闭严格模式，可在next.config.js中修改配置（不推荐，会失去严格模式的问题检测能力）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
};

module.exports = nextConfig;

针对引用变化

将searchParams转换为稳定的原始值作为依赖，或只提取实际需要的参数：

• 序列化方式：

useEffect(() => {
  doSearch();
  console.log(searchParams);
}, [JSON.stringify(searchParams)]);

• 提取具体参数：

// 假设仅用到searchParams中的q参数
const searchQuery = searchParams.get('q');

useEffect(() => {
  doSearch();
  console.log(searchQuery);
}, [searchQuery]);

另外，若doSearch定义在组件内部，每次渲染会重新创建，建议用useCallback包裹，避免因函数引用变化额外触发useEffect：

const doSearch = useCallback(() => {
  // 一些操作
}, []); // 根据实际逻辑添加依赖项

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