《让React Compiler接管Memoization后，我踩了哪些坑》

标签：#前端 #React #ReactCompiler #Memoization #NextJS #ReactHookForm

总结：

作者在生产级Next.js项目中启用React Compiler v1.0的真实踩坑记录。编译器确实能自动处理大部分memoization，但"大部分"这个词背后藏着不少陷阱：React Hook Form的watch()因内部可变状态导致实时预览冻结；Chart.js的点击处理器在移除useCallback后出现数据过时问题；DevTools的Memo徽章仅表示组件被"处理"而非"成功优化"。核心结论是：迁移不是一键操作，需要先升级eslint-plugin-react-hooks、在feature分支启用、用E2E测试覆盖，并保留那些跨越React边界的显式hook。

文章要点：

1. React Compiler的本质是Babel插件：它通过为每个组件预分配扁平缓存数组（内部hook _c）来实现比手写useMemo更细粒度的自动memoization，让你可以删掉大部分显式hook
2. React Hook Form的watch()直接翻车：启用编译器后，表单的实时预览完全冻结，原因是RHF依赖内部可变状态，编译器无法安全memoize。解决方案是用"use no memo"指令包裹useForm的调用
3. 有些useCallback真的删不得：Chart.js的点击处理器在移除useCallback后，高并发下偶尔引用旧数据。这不是编译器bug，而是编译器的memoization节奏与外部库（按引用注册回调）的预期不一致，最终选择保留useCallback并加注释说明
4. DevTools的Memo徽章会误导你：徽章只表示编译器"处理过"该组件，不代表优化成功。即使组件违反React规则（如直接修改props），徽章依然可能出现，真正没徽章的只有显式加了"use no memo"的组件
5. 迁移有明确的正确顺序：先升级eslint-plugin-react-hooks到v7+并修复lint错误，再在feature分支启用编译器，最后用Profiler和E2E测试验证，不要依赖Memo徽章作为正确性信号

URL：https://blog.logrocket.com/react-compiler-memoization-what-actually-broke/

LogRocket Blog

I let React Compiler handle memoization: Here's what actually broke - LogRocket Blog

Learn how to migrate a production Next.js app to React Compiler v1.0, including real breakages with React Hook Form, useMemo, useCallback, and DevTools tips.