使用useEffect替代useTextEditingController遇late初始化错误，求排查写法问题

希望使用useEffect搭配TextEditingController而非useTextEditingController，但当前代码触发late初始化错误，不确定初始化与销毁的写法是否正确，相关代码如下：

class EffectTest extends HookWidget {
  const EffectTest({super.key});

  @override
  Widget build(BuildContext context) {
    late TextEditingController controller;

    useEffect(
      () {
        controller = TextEditingController();

        return () {
          controller.clear();
        };
      },
      [],
    );

    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Text(controller.value.text),
            TextField(
              controller: controller,
              onSubmitted: (value) {
                print(controller.value.text);
              },
            ),
          ],
        ),
      ),
    );
  }
}

问题原因与解决方案 #

错误原因 #

1. late变量初始化时机不匹配：late声明的controller在build方法执行时会被立即访问（比如Text(controller.value.text)），但useEffect的回调是组件挂载完成后才执行的，此时controller还没被赋值，直接触发late未初始化错误。
2. 资源释放不彻底：原清理函数仅调用controller.clear()，这只是清空文本内容，并未释放TextEditingController占用的底层资源，会导致内存泄漏。

正确写法 #

推荐使用useMemoized创建TextEditingController，结合useEffect处理资源释放：

class EffectTest extends HookWidget {
  const EffectTest({super.key});

  @override
  Widget build(BuildContext context) {
    // 用useMemoized确保controller仅初始化一次
    final controller = useMemoized(() => TextEditingController(), []);

    useEffect(
      () {
        // 清理函数中调用dispose释放资源
        return () => controller.dispose();
      },
      [controller], // 依赖controller确保清理函数正确绑定
    );

    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Text(controller.value.text),
            TextField(
              controller: controller,
              onSubmitted: (value) {
                print(controller.value.text);
              },
            ),
          ],
        ),
      ),
    );
  }
}

写法说明 #

• useMemoized会在组件首次构建时创建TextEditingController，依赖项为空数组保证不会重复初始化，这样在build阶段访问controller时已经完成赋值，避免late错误。
• useEffect的清理函数调用controller.dispose()，这是释放文本控制器资源的标准方式，彻底避免内存泄漏。

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