如何统计并展示React函数组件的渲染次数

直接用useRef存储渲染计数即可，不要用useState存计数——state更新会触发组件重渲染，会直接陷入无限渲染的死循环。useRef保存的值修改后不会触发重渲染，刚好适合存这类不需要驱动视图更新的渲染统计值。

修改后的完整代码如下：

import React, { useState, useRef } from "react"

export default function App(){
  const [state, setState] = useState(0);
  // 初始化渲染计数ref
  const renderCount = useRef(0);
  // 每次组件执行（即每次渲染）时计数+1
  renderCount.current += 1;

  return <>
    <button onClick={() => setState(state + 3)}>Click to increment</button>
    <p>按钮触发的计数值：{state}</p>
    <p>组件累计渲染次数：{renderCount.current}</p>
  </>
}

注意事项 #

• 计数自增逻辑不要写在useEffect里：useEffect是在组件渲染完成、DOM提交后才执行，会导致计数展示比实际渲染慢一拍，首次渲染时计数不会同步更新。
• 开发环境如果开启了React严格模式（StrictMode），首次加载时会看到渲染计数直接变成2，这是正常现象：严格模式下React会在开发环境重复执行一次组件渲染逻辑，帮你排查不规范的副作用写法，生产环境不会出现这个情况。
• 如果只是开发阶段排查渲染性能问题，不需要往业务代码里加计数逻辑，直接用React DevTools调试工具就能查看所有组件的渲染次数、渲染耗时等信息。

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