React 19编译器是否可安全使用JSX内联箭头函数？

答案是肯定的——React 19的编译器完全可以处理JSX内的内联箭头函数，你直接用简化写法就行，不会有性能问题。

背后的优化逻辑 #

React 19编译器会自动分析内联函数依赖的变量（比如你例子里的id），只要依赖没发生变化，它就会稳定这个内联函数的引用。也就是说，只要id不变，每次渲染时这个箭头函数都会复用同一个实例，效果和你之前用useCallback手动包裹的完全一致。

写法对比 #

传统手动优化写法

const testFunction = useCallback(() => {
  doSomething(id)
}, [id])

<Button onClick={testFunction} />

React 19支持的简化写法

<Button onClick={() => doSomething(id)} />

这两种写法在性能上没有差异，编译器会自动完成useCallback原本负责的引用稳定工作。

官方确认 #

React团队在React 19的发布相关内容里明确提到，编译器的核心目标之一就是消除这类样板式的性能优化代码，让开发者不用再手动处理函数引用稳定的问题，能更专注于业务逻辑。

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