Next.js 13.5.4中useState计数器在15以下或20以上时闪烁问题

问题根源 #

你的计数器组件存在两个核心问题：

• 每次组件渲染都会创建新的setInterval，导致多个定时器同时修改state，数值更新逻辑混乱
• setState(state + 1)依赖闭包中的旧state值，无法基于最新状态计算，进一步加剧数值异常
  这些问题结合Next.js 13服务器组件与客户端组件的渲染机制，最终引发特定数值区间的闪烁现象。

修复代码 #

将计数器组件修改为以下形式：

'use client'
import { useState, useEffect } from 'react'

export default function CounterNumber() {
  const [state, setState] = useState(0)
  
  useEffect(() => {
    // 仅在组件挂载时创建一次定时器
    const intervalId = setInterval(() => {
      // 使用函数式更新，确保基于最新state计算
      setState(prevState => prevState + 1)
    }, 1000)
    
    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(intervalId)
  }, [])

  return <h1>Count Value {state}</h1>
}

关键改进点 #

1. 用useEffect管理定时器生命周期：空依赖数组确保定时器只在组件挂载时初始化一次，卸载时自动清除，彻底避免重复创建定时器的问题。
2. 函数式setState：通过prevState参数获取最新状态值，规避闭包导致的旧值引用问题，保证每次状态更新都基于当前最新数值。

经过上述修改后，定时器逻辑稳定，状态更新一致，即可解决数值闪烁的问题。

内容的提问来源于stack exchange，提问作者Jash-215