使用useMemo时引用未初始化变量无TS/ESLint报错，如何触发检测？

你遇到的情况是：同样是在变量初始化时引用自身，直接用立即执行函数会触发TypeScript的Block-scoped variable 'a' used before its declaration.ts(2448)错误，但用useMemo包裹时却不会触发。

问题代码对比 #

• 无错误的useMemo写法：

const a: string = useMemo(() => {
  return a;
}, []);

• 触发错误的立即执行函数写法：

const a: string = (() => {
  return a;
})();

原因分析 #

TypeScript对立即执行函数的闭包会做严格的词法作用域检查——它能识别出这个函数会在变量a完成声明前立即执行，所以检测到提前引用。但useMemo的类型定义中，回调函数被标记为“可能延迟执行”，TypeScript无法确定这个回调会在a的初始化阶段同步执行，因此没有触发错误提示。

解决方案 #

1. 自定义ESLint规则

这是最精准的方案，通过编写自定义ESLint规则来覆盖hooks场景：

• 遍历代码AST，找到变量声明中用useMemo/useCallback作为初始化值的节点
• 检查回调函数内部是否引用了当前正在声明的变量
• 一旦发现这种提前引用，抛出与TS2448类似的错误提示

2. 调整ESLint规则配置

尝试增强@typescript-eslint/no-use-before-define规则的检测范围，修改ESLint配置文件：

{
  "rules": {
    "@typescript-eslint/no-use-before-define": [
      "error",
      {
        "variables": true,
        "enforceForArrowFunctions": true,
        "enforceForFunctionParameters": false
      }
    ]
  }
}

不过这个规则的检测逻辑基于代码位置顺序，对hooks回调的场景可能不够精准，只能作为补充手段。

3. 临时类型约束（有限生效）

通过模块扩展给useMemo添加更严格的类型定义，尝试让TypeScript识别回调的执行时机：

import type { DependencyList } from 'react';

declare module 'react' {
  function useMemo<T>(
    factory: () => T,
    deps: DependencyList
  ): T;
}

这种方式只能做有限约束，无法覆盖所有复杂场景，适合简单项目临时使用。

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