关于React自定义hook useIsFirstRender的语法与useRef使用疑问

我正在完成一项React编码挑战，需求是实现一个自定义Hook，要求在组件首次渲染时返回true，非首次渲染时返回false，对应的实现代码如下：

import { useRef } from "react";

export function useIsFirstRender(): boolean {
  const isFirstRender = useRef(true);

  if (isFirstRender.current) {
    isFirstRender.current = false;
    return true;
  }

  return false;
}

针对这段代码，我有两个疑问，以下是对应的解答：

1. 函数声明useIsFirstRender(): boolean {}具体表示什么含义？ #

这是TypeScript的类型标注语法，: boolean用来明确指定这个函数的返回值类型为布尔值（true或false）。它的作用有两个：

• 给TypeScript编译器提供类型校验依据，确保这个Hook不会返回布尔值以外的其他类型；
• 给开发者提供类型提示，在使用这个Hook时能明确知道它的返回值类型，提升代码可读性和可维护性。

2. 既然isFirstRender.current在函数内被初始化为true，为何不会在每次渲染时都返回true？ #

你没有误解useRef的用法，核心原因是useRef的持久化特性：

• useRef(true)只会在组件首次渲染时创建一个Ref对象，并将current属性初始化为true；
• 当组件后续重新渲染时，调用useRef(true)不会重新创建新的Ref对象，而是直接返回组件首次渲染时创建的那个Ref实例；
• 第一次渲染时，isFirstRender.current为true，代码会进入if分支，将其改为false并返回true；后续每次渲染时，isFirstRender还是同一个Ref对象，current已经是false，所以会直接返回false。

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