React中调用useIsFirstRender无结果显示，求排查逻辑问题

核心问题 #

你在App组件的JSX中错误传入了箭头函数{() => isFirstRender}，React会将其视为函数对象而非执行结果，因此只会显示函数的文本表示，而非预期的true或false。另外，直接在JSX中渲染布尔值（{isFirstRender}）会被React忽略，必须转换为字符串才能正常显示。

修正步骤 #

1. 修复App组件的渲染逻辑
   把箭头函数替换为布尔值的字符串形式：

   export function App() {
     const isFirstRender = useIsFirstRender();
     
     return(
       <div>
         <p>
           This is or is not the first render: {String(isFirstRender)} 
         </p>
       </div>
     )
   }
   

2. 优化useIsFirstRender钩子（可选，更符合React最佳实践）
   原钩子在渲染阶段直接修改ref.current，虽然能运行，但更规范的方式是用useEffect在首次渲染完成后更新ref，避免渲染阶段产生副作用：

   import React, { useRef, useEffect } from 'react';
   
   export function useIsFirstRender(): boolean {
     const isFirstRender = useRef(true);
   
     useEffect(() => {
       // 首次渲染完成后标记为非首次
       isFirstRender.current = false;
     }, []);
   
     return isFirstRender.current;
   }
   

原理说明 #

• 原钩子中useRef保存的变量不会触发组件重渲染，首次渲染返回true，后续渲染返回false，逻辑本身是正确的。
• JSX仅渲染字符串、数字、React元素等内容，布尔值、null、undefined会被自动忽略，因此需要通过String()或三元表达式将布尔值转为字符串。

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