Vite+React默认模板Firefox中计数器点击无界面更新，Chrome正常

问题现象 #

• Vite初始化的React默认模板，计数器按钮在Chromium浏览器中正常工作，点击后数值递增
• Firefox 109.0.1中点击按钮无报错，React DevTools显示组件触发重渲染，但页面上的count数值始终不更新
• 给点击事件添加console.log(count)后，控制台打印的数值正常递增，但页面显示依旧未同步

核心代码片段 #

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
    </>
  )
}

已完成的排查操作 #

• 确认浏览器JavaScript已启用
• 关闭广告拦截工具，问题未解决
• 通过React DevTools性能分析，发现仅Hook触发更新，但状态未同步到页面DOM

相关截图 #

• 控制台数值递增截图：
• 其他相关截图：
• 性能分析截图：

排查与修复步骤 #

1. 调整Firefox增强跟踪保护
   进入Firefox设置 → 隐私与安全 → 增强跟踪保护，将当前站点的保护级别改为"标准"，或临时禁用该站点的跟踪保护。部分严格的保护规则可能干扰React状态与DOM的同步逻辑。

2. 禁用React严格模式
   在项目的main.jsx中，移除<React.StrictMode>的包裹。开发环境下Strict Mode会触发两次渲染，部分Firefox环境可能因此出现状态同步异常。修改后代码如下：

   import React from 'react'
   import ReactDOM from 'react-dom/client'
   import App from './App'
   import './index.css'
   
   ReactDOM.createRoot(document.getElementById('root')).render(
     <App />
   )
   

3. 更新依赖版本
   升级Vite、React及ReactDOM到最新稳定版，修复可能存在的兼容性问题：

   npm install vite@latest react@latest react-dom@latest
   

4. 清除浏览器缓存
   使用快捷键Ctrl+Shift+Delete清除Firefox的缓存和站点数据，重启浏览器后重新测试。

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