为何初始化useState会触发React 19 Hydration错误？

原因分析 #

你遇到的Hydration错误，核心问题是服务端渲染（SSR/SSG）时生成的初始内容，和客户端Hydration阶段的初始状态不匹配：

你的TimeAgo组件在初始化useState时直接调用了calculateTimeAgo(date)，这个函数依赖当前时间（new Date()）。服务端渲染时，会基于服务器的当前时间计算出一个timeAgo值；而客户端Hydrate时，又会基于浏览器的当前时间重新计算一次。只要服务器和客户端的时间存在几秒以上的差异，两个环境生成的timeAgo文本就会不一致（比如服务端算出来是"3 min ago"，客户端算出来是"4 min ago"），这种不匹配就会触发React 19的Hydration校验错误。

你担心不初始化会导致UI空白，这个顾虑是合理的——如果初始state为空，useEffect要等组件挂载后才执行，确实会有短暂的空白期。

解决方案 #

下面提供两种实用的解决思路，既避免Hydration错误，又能保证UI初始有内容：

方案1：初始用静态格式化日期，客户端挂载后切换为相对时间 #

这个方案的核心是让服务端和客户端的初始渲染内容完全一致，后续再动态更新为相对时间：

修改TimeAgo组件：

const TimeAgo = ({ date, className }) => {
  // 初始state用服务端也能生成的静态格式化日期，避免Hydration不匹配
  const [timeAgo, setTimeAgo] = useState(formatDate(date));

  useEffect(() => {
    const updateStats = () => {
      setTimeAgo(calculateTimeAgo(date));
    };
    // 挂载后立即更新为相对时间
    updateStats();
    // 每分钟更新一次
    const interval = setInterval(updateStats, 60000);
    return () => clearInterval(interval);
  }, [date]); // 依赖date，确保date变化时重新计算

  return <span className={className}>{timeAgo}</span>;
};

优点：实现简单，无需额外配置，服务端和客户端初始内容完全一致，不会触发Hydration错误；用户一开始看到完整的格式化日期，随后切换为相对时间，体验流畅。

方案2：服务端传递基准时间，保证两端计算一致 #

如果必须让初始渲染就显示相对时间，可以让服务端把当前时间注入到页面中，客户端用这个时间作为计算基准，确保服务端和客户端的初始结果一致：

1. 服务端渲染时，在HTML中注入全局变量（以Next.js为例）：

<!-- _document.js 或类似服务端入口文件 -->
<script>
  window.__SERVER_NOW__ = '<%= new Date().toISOString() %>';
</script>

2. 修改calculateTimeAgo函数，支持传入基准时间：

const calculateTimeAgo = (date, baseTime?: Date) => {
  const now = baseTime || new Date();
  const past = new Date(date);
  const diffInSeconds = Math.floor((now.getTime() - past.getTime()) / 1000);

  // 原有判断逻辑不变
};

3. 修改TimeAgo组件的state初始化：

const TimeAgo = ({ date, className }) => {
  // 服务端时用服务器时间，客户端时用注入的基准时间初始化
  const baseTime = typeof window !== 'undefined' 
    ? new Date(window.__SERVER_NOW__) 
    : new Date();

  const [timeAgo, setTimeAgo] = useState(() => calculateTimeAgo(date, baseTime));

  useEffect(() => {
    const updateStats = () => {
      setTimeAgo(calculateTimeAgo(date));
    };
    const interval = setInterval(updateStats, 60000);
    return () => clearInterval(interval);
  }, [date]);

  return <span className={className}>{timeAgo}</span>;
};

优点：初始渲染就显示相对时间，完全符合你的需求；两端计算基准一致，从根源上避免Hydration错误。

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