React项目部署后点击特定按钮出现Too many re-renders问题求助

1. 关闭生产构建的代码压缩，获取完整错误信息 #

修改package.json的build命令，或者调整webpack配置，关闭代码压缩（比如将--mode production改为--mode development，或者设置optimization.minimize = false）。重新构建后部署到dev环境，就能看到具体的错误栈，定位到触发重渲染的组件和代码行，而非仅看到压缩后的错误码。

2. 检查按钮事件绑定逻辑 #

• 确认按钮的onClick属性是否误写为直接执行函数：比如onClick={handleClick()}（会在组件渲染时立即执行函数，触发状态更新→重渲染→再次执行的循环），正确写法应为onClick={handleClick}。
• 排查handleClick内部逻辑：是否存在无限制的状态更新操作，比如未加条件判断就直接调用setState，导致状态更新触发重渲染，重渲染又再次执行状态更新。

3. 核对本地与dev服务器的环境变量差异 #

本地和dev服务器的process.env配置可能不同，导致逻辑分支触发差异：

• 接口地址差异：本地用mock数据，dev服务器用真实接口，返回的数据结构不一致，引发状态更新逻辑反复执行。
• 功能开关差异：生产构建后开启了本地未启用的功能分支，该分支存在无限重渲染的逻辑漏洞。

4. 检查React Hooks的使用规范 #

• 禁止在组件顶层（渲染阶段）直接调用setState或状态更新函数，这类操作必须放在useEffect或事件处理器内。
• 校验useEffect的依赖项：如果依赖项是对象、数组等引用类型，生产构建的代码优化可能导致引用频繁变化，触发useEffect反复执行，进而引发状态更新循环。
• 检查useCallback/useMemo的使用：若事件处理器未用useCallback包裹，生产构建后可能因组件重渲染导致函数引用变化，触发子组件不必要重渲染甚至循环。

5. 排查第三方依赖的生产兼容性 #

部分第三方库在生产压缩后可能出现异常：

• UI组件库的按钮组件在生产模式下的事件触发逻辑存在bug，导致回调函数被反复调用。
• 状态管理库（如Redux、MobX）的中间件或订阅逻辑在生产构建后出错，引发状态反复更新。

6. 调试生产构建代码 #

在浏览器开发者工具中开启Source Maps，将生产代码映射回源码，在按钮点击事件处打断点，逐步跟踪执行流程，定位无限重渲染的触发点。

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